Chrome 使用 tabindex="-1" 突出显示 div

Question

我正在使用 React 组件在我的 HTML 上注入 <div tabindex="-1">。然后，每次我单击一个内部对象时，它都会在元素上添加一个蓝色边框，如下例所示：

是否可以删除此边框？

Answer 1

试试这个：

代码：

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

Answer 2

您可以使用 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>

Chrome highlighting a div with tabindex="-1"