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

<p>Click on the button using a mouse. Then try tabbing to the button.</p>
<button>without :focus-visible</button>
<button class="with-focus-visible">with :focus-visible</button>

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

Answer 2

Use this code:

input:focus {
    outline: 0;
}

Answer 3

To remove it from all inputs

input {
 outline:none;
}

Answer 4

In your case, try:

input.middle:focus {
    outline-width: 0;
}

Or in general, to affect all basic form elements:

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

---

In the comments, Noah Whitmore suggested taking this even further to support elements that have the contenteditable attribute set to true (effectively making them a type of input element). The following should target those as well (in CSS3 capable browsers):

[contenteditable="true"]:focus {
    outline: none;
}

Although I wouldn't recommend it, for completeness' sake, you could always disable the focus outline on everything with this:

*:focus {
    outline: none;
}

Keep in mind that the focus outline is an accessibility and usability feature; it clues the user into what element is currently focused.

Answer 5

This is an old thread, but for reference it's important to note that disabling an input element's outline is not recommended as it hinders accessibility.

The outline property is there for a reason - providing users with a clear indication of keyboard focus. For further reading and additional sources about this subject see http://outlinenone.com/

Answer 6

None of the solutions worked for me in Firefox.

The following solution changes the border style on focus for Firefox and sets the outline to none for other browsers.

I've effectively made the focus border go from a 3px blue glow to a border style that matches the text area border. Here's some border styles:

Dashed border (border 2px dashed red):

No border! (border 0px):

Textarea border (border 1px solid gray):

Here is the code:

input:focus, textarea:focus {
    outline: none; /** For Safari, etc **/
    border:1px solid gray; /** For Firefox **/
}

#textarea  {
  position:absolute;
  top:10px;
  left:10px;
  right:10px;
  width:calc(100% - 20px);
  height:160px;
  display:inline-block;
  margin-top:-0.2em;
}

<textarea id="textarea">yo</textarea>