Google Chrome > Textboxes > Yellow border when active..?

Question

Ive been modifying a form today, and testing it in Chrome. I noticed that on selecting a textbox, with border: 0 or none, it still puts a yellow border around it. Does anyone know of a way to get rid of this border? I usually wouldnt be that bothered but it looks really horrible with the colour scheme I am using.

Thanks in advance.

Regards,

Richard

PS I have tried using !important too, in case something else is setting the border to yellow in the CSS.

Solution 1

This is caused by an outline, not a border. The specific style you see is defined in the user agent (browser) stylesheet.

I agree that Chrome's large, highlighted outline looks bad in many cases, although it does make it obvious which field is active.

---

As of early 2014, the highlight is now blue (instead of yellow) and the highlight effect is smaller. The following instructions are still valid for modifying this style.

---

Removing the Outline

You can set outline: none; on any element to remove the highlight completely.

input[type="text"], input[type="password"] { outline: none; }

This potentially (likely) reduces accessibility/usability. There is even a website dedicated to the dangers of completely removing the outline.

Styling the Outline

A better alternative is to style the outline so that it is still visible but less obnoxious. See https://developer.mozilla.org/en-US/docs/CSS/outline

Demo: http://jsfiddle.net/G28Gd/2/

INPUT[type="text"]:focus,
INPUT[type="number"]:focus,
INPUT[type="email"]:focus,
INPUT[type="search"]:focus,
INPUT[type="password"]:focus,
INPUT[type="range"]:focus
{
    outline: 1px solid #0033dd;    
}​

User Expectations

At times, style sheet authors may want to create outlines around visual objects such as buttons, active form fields, image maps, etc., to make them stand out.

In theory, the outline may be used for cosmetic purposes though I've never found a practical use other than indicating focus. However, it's best to only show a focus-like outline when an element is actually focused. In other words, don't make an element look focused when it is not.

Remember that HTML anchors can also receive focus and that their outline can also be styled. This can be a useful cue to the user.

Visual Rendering

The outline created with the outline properties is drawn "over" a box, i.e., the outline is always on top, and does not influence the position or size of the box, or of any other boxes. Therefore, displaying or suppressing outlines does not cause reflow or overflow.

An outline may be applied to any element (again, make sure to not confuse the user).

Unlike borders, they do not impact the position or size of the box. This is important, for example, when showing that an anchor has focus; if you added a border to the anchor, the whole box would visibly shift by the size of the border (try it). By comparison, an outline will not shift the box.

One downside of this box-independence is that the outline doesn't always render precisely where you would expect. Replaced elements may render in ways (now, or in the future) that might not look good with a particular highlight style. <input type="range"> is a good candidate for seeing this behavior.

_{This outline is functional, but not very pretty or even aligned correctly (Chrome 26-29).}

---

Button elements do not currently (Chrome 21) look correct with an outline specified (try it and see - the outline does not follow the edge of the button).

_{Outlines now appear to be correctly aligned with the edges of a button as of Chrome 26.}

Solution 2

It's an outline, not a border; Use the outline CSS property.

Comments

[Alec]

Try outline: none;

[imme]

for the sake of reference, some useful links about css' outline-property : w3.org/TR/CSS2/ui.html#dynamic-outlines , alexmansfield.com/css/css-outline

[ClarkeyBoy]

Think immeemosol, bookmarked those for future reference! Very useful!

[ClarkeyBoy]

Thanks. I never even knew outline existed - somehow managed to skip that one for the last 6 years... For the purpose this application is for (an offline application for use by my Dads company), accessibility doesnt really matter. Thanks again.

[Gabriele Cirulli]

I believe outline is a new property in CSS3

[Esteban]

Is there any risk to use * { outline: none; } when no outline should be shown on any element?

[Tim M.]

@Esteban - Removing the outline from all elements shouldn't do anything harmful visually. It's separate from most (all?) layout operations (per the spec). To me, it's a potential usability problem since people expect focus on a variety of elements. It's also worth nothing that an anchor can receive focus (not just form elements, as my answer discusses), so you'll lose that too if you remove the outline from all elements.