How to remove the border highlight on an input text element

Question

When an HTML element is \'focused\' (currently selected/tabbed into), many browsers (at least Safari and Chrome) will put a blue border around it.

For the layout I a

Answer 1

Update 2020 - :focus-visible

Good news for accessibility - Chrome & Firefox just added support for :focus-visible.

Hiding focus styles is bad practice due to accessibility requirements (keyboard navigation) which makes your websites less accessible.

Use :focus-visible pseudo-class and let the browser to determinate when to apply focus.

:focus-visible /* Chrome */

Note that Firefox supports similar functionality through an older, prefixed pseudo-class:

:-moz-focusring /* Firefox */

button {
  color: #000;
  background-color: #fff;
  padding: 10px 16px;
  margin: 10px 0;
  border-radius: 4px;
}

button:focus {
  box-shadow: 0 0 0 2px #E59700;
  outline: 0;
}

button:hover {
  background-color: #eee;
}

button.with-focus-visible:focus:not(:focus-visible) {
  box-shadow: none;
  outline: 0;
}

button.with-focus-visible:focus-visible, 
button.with-focus-visible:moz-focusring {
  box-shadow: 0 0 0 2px #E59700;
  outline: 0;
}

Click on the button using a mouse. Then try tabbing to the button.
without :focus-visible
with :focus-visible

docs: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible

w3 specifications: https://www.w3.org/TR/selectors-4/#the-focus-visible-pseudo