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.
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.
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.
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.
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.
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; }
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.
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.
It's an outline
, not a border; Use the outline CSS property.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With