Chrome default borders on input text

Question

I'm trying to understand the default borders Chrome applies to elements. For this example I'm using input text.

When using jquery to get the border I have

$("input").css("border")
"2px inset rgb(0, 0, 0)"

in chrome dev tab. I can see it is correct because it is the same shown in the computed style tab of chrome.

Howerver when I try to manually apply "2px inset rgb(0, 0, 0)" to the border of an element (via jquery css or directly via style sheet) I get a very different border. I can notice that rgb(0, 0, 0) is black but the default border in chrome is grey indeed...

I'm confused.. I have a fiddle that show this http://jsfiddle.net/MicheleC/jE5K7/

EDIT:

This is the chrome user agent stylesheet

border: 2px inset;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;

which lead to

Question 1: Why is defaults to rgb(238, 238, 238)?

Question 2: how can I get the real computed color programmatically? i.e. Something like $("input").css("border-bottom-color") which unfortunately gives me rgb(0, 0, 0)

Question 3: When I set manually border: 2px inset rgb(238, 238, 238); (which is what chrome says it is computed) why I get something different?

Answer 1

Browsers have different oddities in rendering input elements, for historical reasons. Early implementations used built-in routines for them, so that the rendering was more or less immune to anything you tried to say in CSS. Common defaults stem from those implementations, and for compatibility, to make old pages display the way they used to, modern implementations “fall back” to old rendering when CSS is not used to set key properties such as border.

This means that conceptually there is a rendering layer above the normal CSS based layer, and if “sufficient” rendering rules are not set in CSS, the element is rendered the old way.

For example, if you have just <input> and you check its CSS properties using getComputedStyle (a more direct way than the jQuery way, but gives the same result, you get the computed CSS properties. Basically, that’s border: inset 2px, defaulting the border color to content color (usually black by default). But they only reflect the values used when the element is rendeder under full control of CSS. Here they are not, and the internal browser default rendering is used. In Chrome, this means that the border is solid grey 1px and there is a padding of 1px.

If you set e.g. border-color only, the initial browser default rendering is suppressed and CSS-controlled rendering is used instead. This means that you get an inset 2px border of the color you specified, instead of getting the browser default rendering with just the color changed.

This is confusing, but on the practical side, it’s rather simple: If you want browser default rendering for the border of an input element, don’t set any border properties on it. If you don’t want that, set all browser properties to the values you want.

Regarding the specific questions:

1. The color information rgb(238, 238, 238) in Chrome dev tools is probably a bug caused by some interference between the rendering methods. Note that it is very light grey and does not correspond to the actual color used. It is probably the color that would be used as the lighter color in an inset border.
2. You get the computed color the way you are using or with getComputedStyle, but it relates to CSS-controlled rendering only and does not apply to <input> without any style sheet settings beyond browser style sheet.
3. When you set all border properties, you get CSS-controlled rendering.