Chromeはtabindex = " - 1"でdivを強調表示します

Question

自分のHTMLに<div tabindex="-1">を挿入するReactコンポーネントを使用しています。

https://jsfiddle.net/zdtw7uq0/

それは、この境界線を除去することが可能である：次に、すべての時間は、私はそれが以下の例のように、要素の上に青い枠が追加され、内側のオブジェクトをクリックしてください？

Answer 1

あなたが行動をオフにするattribute selectorを使用することができます。 tabindex="-1"持つ要素にのみ

[tabindex] { 
    outline: none; 
} 

：

[tabindex="-1"] { 
    outline: none; 
} 

.container { 
 
    width: 200px; 
 
    height: 100px; 
 
    padding: 100px; 
 
    background-color: #fff; 
 
} 
 

 
[tabindex="-1"] { 
 
    outline: none; 
 
}

<div tabindex="-1"> 
 
    <div class="container"> 
 
    Something 
 
    </div> 
 
</div>

tabindex持つすべての要素について

Answer 2

これを試してみてください：

コード：

<div tabindex="-1" class="tab"> 
    <div class="container"> 
    Something 
    </div> 
</div> 

スタイル：

.container { 
    width: 400px; 
    height: 200px; 
    padding: 200px; 
    background-color: #fff; 
    outline:none; 
} 

.tab { 
    outline:none; 
}