Chrome默认的输入文本边界

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

我试图理解Chrome适用于元素的默认边框。在本例中，我使用的是输入文本。

When using jquery to get the border I have

使用jquery获取边框时

$("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.

在chrome开发选项卡中。我可以看到它是正确的，因为它和chrome的computed style选项卡显示的一样。

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...

然而，当我尝试手工将“2px inset rgb(0,0,0)”应用到元素的边框(通过jquery css或者直接通过样式表)时，我得到的边框完全不同。我可以注意到rgb(0,0,0)是黑色的，但是chrome的默认边框却是灰色的……

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

我困惑. .我有一个小提琴显示http://jsfiddle.net/MicheleC/jE5K7/

EDIT:

编辑:

This is the chrome user agent stylesheet

这是chrome用户代理样式表

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)?

问题1:为什么默认为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)

问题2:如何以编程方式获得真实的计算颜色?比如$("input").css("border-bottom-color")这很不幸地给了我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?

问题3:手动设置边框:2px inset rgb(238、238、238);(chrome就是这么说的)为什么我得到了不同的东西?

2 个解决方案

#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.

由于历史原因，浏览器在呈现输入元素时有不同的奇怪现象。早期的实现使用了内置的例程，因此呈现或多或少地对您在CSS中尝试说的任何内容都是免疫的。常见的默认值来自于这些实现，并且为了兼容性，为了让旧的页面以它们以前的方式显示，当CSS不用于设置关键属性(比如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.

这意味着，在概念上，在正常的CSS基础之上，有一个呈现层，如果“足够”的呈现规则不是在CSS中设置的，那么元素将呈现旧的方式。

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.

例如，如果您只有，并且使用getComputedStyle检查它的CSS属性(比jQuery方式更直接，但是给出了相同的结果，您就得到了计算的CSS属性。基本上，这是border: inset 2px，默认为content color(通常默认为黑色)。但它们只反映在元素在CSS完全控制下被重命名时使用的值。这里没有，使用的是内部浏览器默认呈现。在Chrome中，这意味着边框是纯灰色的1px，填充为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.

如果只设置边框颜色，则会抑制初始浏览器默认呈现，并使用css控制的呈现。这意味着您可以在指定的颜色上设置一个inset 2px的边框，而不是使用颜色改变的浏览器默认渲染。

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. 在Chrome dev工具中，颜色信息rgb(238, 238, 238)可能是由于渲染方法之间的一些干扰而引起的。注意，它是非常浅灰色，不符合实际使用的颜色。它很可能是一种颜色，在一个镶嵌的边框中被用作较浅的颜色。
3. 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.
4. 使用getComputedStyle或使用getComputedStyle获得计算出的颜色，但是它只与css控制的呈现有关，不适用于，除了浏览器样式表之外没有任何样式表设置。
5. When you set all border properties, you get CSS-controlled rendering.
6. 当您设置所有边界属性时，您将得到css控制的呈现。

#2

I'm not 100% that I understood the question right, but i think you might be thinking of the css-attribute "outline". If you set outline to "none" you don't get the chrome standard little blue/gray border (or outline as it's called).

我不是百分之百地理解这个问题，但是我认为您可能正在考虑css属性的“大纲”。如果你将轮廓设置为“无”，你就不会得到chrome标准的蓝色/灰色边框(或它所称的轮廓)。

Hope this helps!

希望这可以帮助!