Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 982
ClarkeyBoy Avatar asked Oct 06 '10 17:10

ClarkeyBoy


People also ask

Why is my Chrome banner yellow?

It was discovered that the yellow screen tint problem emerged due to a new Experimental 'Dynamic color gamut' flag that is automatically enabled in the Chrome Android browser app starting with v87. The flag's description reads – “Displays in wide color when the content is wide.

What is the yellow Google Chrome?

The color google chrome yellow with hexadecimal color code #ffce44 is a medium light shade of yellow. In the RGB color model #ffce44 is comprised of 100% red, 80.78% green and 26.67% blue. In the HSL color space #ffce44 has a hue of 44° (degrees), 100% saturation and 63% lightness.


2 Answers

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.

enter image description here

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.

like image 128
Tim M. Avatar answered Nov 11 '22 23:11

Tim M.


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

like image 31
Core Xii Avatar answered Nov 11 '22 21:11

Core Xii