Restore Webkit's CSS Outline on Input Field

Restore Webkit's CSS outline on input field

Instead of resetting with outline: none, reset with outline-width: 0. This prevents the browser from clearing the styles and when you reapply a width the style will still be there.

input:focus {
  outline-width: 0;
}

input.nostyle:focus {
  outline-width: 5px;
}

http://jsfiddle.net/VT4Hb/

How to reset / remove chrome's input highlighting / focus border?

You should be able to remove it using

outline: none;

but keep in mind this is potentially bad for usability: It will be hard to tell whether an element is focused, which can suck when you walk through all a form's elements using the Tab key - you should reflect somehow when an element is focused.

webkit htm5 css reset for input elements

A good form reset stylesheet (with a wee bit of JS) is Formalize.

Formalize resets everything and than works to ensure consistent forms across browsers.

How to remove focus border (outline) around text/input boxes? (Chrome)

This border is used to show that the element is focused (i.e. you can type in the input or press the button with Enter). You can remove it with outline property, though:

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

You may want to add some other way for users to know what element has keyboard focus though for usability.

Chrome will also apply highlighting to other elements such as DIV's used as modals. To prevent the highlight on those and all other elements as well, you can do:

*:focus {
    outline: none;
}

---

⚠️ Accessibility warning

Please notice that removing outline from input is an accessibility bad practice. Users using screen readers will not be able to see where their pointer is focused at. More info at a11yproject

Reset Styles for input elements and restyling to bring back the default appearance

You can't get the default styles back once you change them. If you want to normalize the margins and padding across browsers, just normalize the margins and padding and don't touch any of the other styles, especially border and background.

How to remove the border highlight on an input text element

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

How to reset default styling of input[type=text]:focus in Chrome and Safari?

You can get rid of the reset button feature of webkit using:

input[type="search"] {
    -webkit-appearance: none;
}

::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

This works in Chrome for sure, but I haven't had the chance to test in Safari.

How can I get rid of input border in chrome?

form#search input[type="search"] { 
    -webkit-appearance: none; 
}

Mind that this will disable the select element arrow.

---

Related Topics