cssinputsafariwebkitborder

How to remove the border highlight on an input text element


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 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.

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


Solution

  • Before you do that, keep in mind that the focus outline is an accessibility and usability feature; it clues the user into what element is currently focused, and a lot of users depend on it. You need to find some other means to make focus visible.

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