Chrome highlighting a div with tabindex="-1"

Question

I am using a React component that injects a <div tabindex="-1"> on my HTML. Then, every time I click an inner object it adds a blue border on the element, like the example below:

https://jsfiddle.net/zdtw7uq0/

Is it possible to remove this border?

Answer 1

You can use an attribute selector to turn the behavior off.

For all element with tabindex:

[tabindex] {
  outline: none;
}

Only for elements with 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>