Chrome突出顯示帶有tabindex =「 - 1」的div

Question

我正在使用React組件在我的HTML中注入<div tabindex="-1">。然後，我每次點擊的內部對象時，它增加了元件上的藍色邊框，如下面的例子：

https://jsfiddle.net/zdtw7uq0/

是否可以刪除這條邊界？

Answer 1

您可以使用attribute selector打開行爲了。

對於tabindex所有元件：

[tabindex] { 
    outline: none; 
} 

僅用於元件與tabindex="-1"：

[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>

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; 
}