Default input borders in Chrome

Question

By default, input elements are styled with border: 2px inset. However, as long as the background is white, the border displays as a thin gray line (with #eee color). But if I change the background even the slightest (e.g. #feffff), the border suddenly changes to what you would expect from 2px inset. What is causing this weird behavior?

Here's an example (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>

This results in the first and third boxes having inset borders, while the second one has a thin-line border:

Answer 1

That's because the input element on Chrome inherits from its stylesheet

 -webkit-appearance:textfield;

And textfield has just 1px light-grey borders.

Try to add the following and you will see that also the input will have the same border inset even if white:

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