Chrome 中的默认输入边框

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

这是一个例子（http://jsfiddle.net/ttb2fc1d/ 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>

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

这是因为 Chrome 上的输入元素继承自其样式表

 -webkit-appearance:textfield;

文本字段只有 1px 浅灰色边框。

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

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

杰斯小提琴： http://jsfiddle.net/a_incarnati/zqmbvn7v/1/ http://jsfiddle.net/a_incarnati/zqmbvn7v/1/