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;

文本字段只有 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/