Chrome 输入文本的默认边框

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;

导致

问题 1： 为什么默认是 rgb(238, 238, 238)？

问题 2： 如何以编程方式获得真正的计算颜色？即像$("input").css("border-bottom-color") 这样的东西不幸地给了我 rgb(0, 0, 0)

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

Answer 1

我不是 100% 正确理解了这个问题，但我认为您可能正在考虑 css 属性“大纲”。如果您将轮廓设置为“无”，则不会获得 chrome 标准的蓝色/灰色小边框（或所谓的轮廓）。

希望这会有所帮助！

Answer 2

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

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

例如，如果您只有 <input> 并使用 getComputedStyle 检查它的 CSS 属性（比 jQuery 方式更直接，但给出相同的结果，您会得到计算的 CSS 属性。基本上，就是 @ 987654325@，默认边框颜色为内容颜色（一般默认为黑色）。但它们只反映元素在CSS完全控制下渲染时使用的值。这里不是，使用的是浏览器内部默认渲染。 Chrome，这意味着边框是纯灰色 1px 并且有 1px 的 padding。

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

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

关于具体问题：

1. Chrome 开发工具中的颜色信息rgb(238, 238, 238) 可能是渲染方法之间的一些干扰导致的错误。请注意，它是非常浅的灰色，与实际使用的颜色不对应。它可能是用作嵌入边框中较浅颜色的颜色。
2. 您可以通过使用方式或使用 getComputedStyle 获得计算颜色，但它仅与 CSS 控制的呈现相关，不适用于在浏览器样式表之外没有任何样式表设置的 <input>。
3. 设置所有边框属性后，您将获得 CSS 控制的呈现。

Answer 3

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

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

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