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>

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

Answer 1

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

 -webkit-appearance:textfield;

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;
}

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