Chrome默认输入文字边框 [英] Chrome default borders on input text

问题描述

我正在尝试了解Chrome应用于元素的默认边框。对于这个例子，我正在使用输入文本。

当使用jquery获取边框时我有

  $（input）。css（border）
2px inset rgb（0,0,0）
   
 
 
。我可以看到它是正确的，因为它与chrome的计算样式选项卡中显示的相同。
 
 
 
当我尝试手动应用时，Howerver2px inset rgb（0,0,0）到一个元素的边界（通过jquery  css 或直接通过样式表）我得到一个非常不同的边界。我可以注意到rgb（0,0,0）是黑色的但是chrome中的默认边框确实是灰色的...... 
 
 
 
我很困惑..我有一个显示这个（比jQuery方式更直接的方法，但给出相同的结果，你得到计算的CSS属性。基本上，这是 border：inset 2px ，默认边框颜色为内容颜色（通常默认为黑色。）但是它们只反映了在CSS完全控制下元素渲染时使用的值。这里它们不是，并且使用内部浏览器默认渲染。在Chrome中，这意味着边框是纯灰色1px并且填充为1px。
 
 
 
如果仅设置例如 border-color ，则初始浏览器默认渲染被抑制并且使用CSS控制的渲染。这意味着你获得了你指定的颜色的嵌入2px边框，而不是获得浏览器def只改变颜色的渲染。
 
 
 
这很令人困惑，但从实际角度来说，它很简单：如果你想要一个<$边框的浏览器默认渲染c $ c> input 元素，不要在其上设置任何边框属性。如果您不想这样，请将所有浏览器属性设置为您想要的值。
 
 
 
关于具体问题：
 
 
 Chrome开发工具中的颜色信息 rgb（238,238,238）可能是一个错误造成的通过渲染方法之间的一些干扰。请注意，它非常浅灰色，与实际使用的颜色不符。它可能是插入边框中用作较浅颜色的颜色。
 
 
您可以按照使用方式或使用 getComputedStyle获得计算颜色
 code>，但它仅与CSS控制的渲染有关，不适用于< input> ，除了浏览器样式表之外没有任何样式表设置。 
 
当您设置所有边框属性时，您将获得CSS控制的渲染。
 
 
 
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?

解决方案
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:

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.
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.
When you set all border properties, you get CSS-controlled rendering.


                        
这篇关于Chrome默认输入文字边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！