Question

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

使用jquery获取边框时我有

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

Chrome浏览器选项卡中的

。我可以看到它是正确的，因为它与chrome的计算样式选项卡中显示的相同。

当我尝试手动将"2px inset rgb(0, 0, 0)"应用于元素的边框（通过jquery css或直接通过样式表）时，我会得到一个非常不同的边框。我可以注意到rgb（0,0,0）是黑色的但是chrome中的默认边框确实是灰色的......

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

编辑：

这是chrome用户代理样式表

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

导致

enter image description here

问题1： 为什么默认为rgb（238,238,238）？

问题2： 如何以编程方式获得真实的计算颜色？即$("input").css("border-bottom-color")之类的东西，不幸的是给了我rgb（0,0,0）

问题3： 当我手动设置border: 2px inset rgb(238, 238, 238);（这就是chrome说它的计算方法）为什么我会得到不同的东西？

enter image description here

Answer 1

由于历史原因，浏览器在渲染input元素方面有不同的奇怪之处。早期的实现使用了内置的例程，因此渲染或多或少地免于你在CSS中试图说的任何东西。常见的默认值源于这些实现，并且为了兼容性，使旧页面显示它们以前的方式，当CSS不用于设置关键属性（如border）时，现代实现“回退”到旧的渲染。

这意味着概念上在普通的基于CSS的图层上方有一个渲染层，如果在CSS中没有设置“足够的”渲染规则，则该元素将以旧方式呈现。

例如，如果您只有<input>并且使用getComputedStyle检查其CSS属性（比jQuery方式更直接，但给出相同的结果，则获得计算的CSS属性。基本上，这是border: inset 2px，将边框颜色默认为内容颜色（默认情况下通常为黑色）。但它们仅反映在CSS完全控制下元素渲染时使用的值。这里它们不是，内部浏览器使用默认渲染。在Chrome中，这意味着边框为实心灰色1px，填充为1px。

如果您设置例如仅border-color，初始浏览器默认渲染被抑制，而使用CSS控制渲染。这意味着您获得了指定颜色的嵌入2px边框，而不是仅使用颜色更改来获取浏览器默认渲染。

这很令人困惑，但在实际方面，它相当简单：如果您希望浏览器默认呈现input元素的边框，请不要在其上设置任何边框属性。如果您不想这样，请将所有浏览器属性设置为您想要的值。

关于具体问题：

Chrome开发工具中的颜色信息rgb(238, 238, 238)可能是由渲染方法之间的某些干扰引起的错误。请注意，它非常浅灰色，与实际使用的颜色不符。它可能是用作插入边框中较浅颜色的颜色。
您可以按照使用的方式或使用getComputedStyle获得计算颜色，但它仅与CSS控制的渲染相关，并且不适用于<input>，除了浏览器样式表之外没有任何样式表设置。
当您设置所有边框属性时，您将获得CSS控制的渲染。

Answer 2

您可以使用CSS执行以下操作：

input, textarea {
  border-top-style: hidden;
  border-right-style: hidden;
  border-left-style: hidden;
  border-bottom-style: hidden;
}

这将删除输入和文本区域上的所有闪亮边框

Answer 3

我不是100％我理解正确的问题，但我认为你可能会考虑css-attribute＆＃34; outline＆＃34;。如果您将大纲设置为＆＃34; none＆＃34;你不会得到镀铬标准的蓝色/灰色小边框（或称为轮廓）。

希望这有帮助！

Chrome默认输入文字边框

3 个答案: