Chrome浏览器中的默认输入框边框

Question

默认情况下，输入元素的样式为border: 2px inset。然而，只要背景是白色的，边框就会显示为细灰色线条（颜色为#eee）。但是，如果我稍微改变一下背景（例如#feffff），边框突然变成了你从2px inset所期望的样子。是什么导致了这种奇怪的行为？

这里有一个例子（http://jsfiddle.net/ttb2fc1d/）：

CSS

.border-test {
    display: inline-block;
    vertical-align: top;
    width: 50px;
    height: 50px;
    border: 2px inset;
    margin: 8px;
}
.gray {
    background-color: #feffff;
}

HTML

<div class="border-test"></div>
<input class="border-test"></input>
<input class="border-test gray"></input>

这将导致第一个和第三个框具有嵌入式边框，而第二个框具有细线边框：

- riv

---

这很奇怪啊。改变背景颜色会影响边框样式？ - zgood

它似乎是浏览器特定的（我只能在Chrome中看到），这很有道理，因为它涉及默认样式。 - zgood

我意识到上面的陈述很愚蠢，因为标题中有“..在Chrome中”的字眼。 - zgood

Answer 1

这是因为在Chrome浏览器中，输入元素会继承其样式表。

 -webkit-appearance:textfield;

文本框只有1像素浅灰色边框。

尝试添加以下内容，您将看到即使是白色的输入框也会有相同的内嵌边框：

.border-test {
  display: inline-block;
  vertical-align: top;
  width: 50px;
  height: 50px;
  border: 2px inset;
  margin: 8px;
  background-color: white;
  -webkit-appearance: none;
}

Jsfiddle: http://jsfiddle.net/a_incarnati/zqmbvn7v/1/

的意思是：这是一个网址，可以在其中查看关于it技术的示例代码。

- Alessandro Incarnati

---

不错的信息！我希望我们在所有浏览器中都有标准化的输入样式。 - zgood

我对你的 CSS 技巧感到惊叹。 - zgood

现在的CSS已经变得非常强大且功能齐全，以至于网页开发比以往任何时候都更加棘手 :) - Alessandro Incarnati

好的，但为什么改变背景颜色会禁用外观呢？ - riv

由于某种原因，每当您更改背景颜色时，它也会将其状态更改为非文本字段。显然，文本字段只接受白色作为背景颜色以保持其UI状态。如果您设置任何其他具有不同背景颜色的输入，您仍将看到相同的2px边框应用，而不是文本字段外观。 - Alessandro Incarnati