How to remove the border highlight on an input tex

Question

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

For the layout I am working on, this is distracting and does not look right.

<input type="text" name="user" class="middle" id="user" tabindex="1" />

FireFox does not seem to do this, or at least, will let me control it with

border: x;

If someone can tell me how IE performs, I would be curious.

But getting Safari to remove this little bit of flare would be nice.

Answer 1

Remove the outline when focus is on element, using below CSS property:

input:focus {
    outline: 0;
}

This CSS property removes the outline for all input fields on focus or use pseudo class to remove outline of element using below CSS property.

.className input:focus {
    outline: 0;
} 

This property removes the outline for selected element.

Answer 2

To remove it from all inputs

input {
 outline:none;
}

Answer 3

This was confusing me for some time until I discovered the line was neither a border or an outline, it was a shadow. So to remove it I had to use this:

input:focus, input.form-control:focus {

    outline:none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

Answer 4

You can remove the orange or blue border (outline) around text/input boxes by using: outline:none

input {
    background-color: transparent;
    border: 0px solid;
    height: 20px;
    width: 160px;
    color: #CCC;
    outline:none !important;
}

Answer 5

Use this code:

input:focus {
    outline: 0;
}

Answer 6

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.