html – Chrome中的默认输入边框

默认情况下,输入元素的样式为border：2px inset.但是,只要背景为白色,边框就会显示为细灰线(带#eee颜色).但如果我改变背景甚至最轻微(例如#feffff),边界突然变为你对2px插入的期望.造成这种奇怪行为的原因是什么？

这是一个例子(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;

而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/