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