html - Chrome 突出显示带有 tabindex ="-1"的 div

Question

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

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>