为什么将背景图像添加到输入(按钮)会更改其默认浏览器用户代理样式？

Question

下面是一个例子：http://jsfiddle.net/eJSGn/

input{
    padding-left: 20px;        
}
input:last-of-type{
    background: url(http://skiorboard.com/wp-content/uploads/2014/03/search.png) no-repeat;    
    background-size:15px 15px;
}
<input type="button" value=" Search " />
<input type="button" value=" Search " />
<input type="button" value=" Search " />

因此，如果我有三个输入按钮并将三个按钮中的最后一个样式设置为具有背景图像（放大镜），为什么将此图像添加到第三个按钮也会导致按钮发生剧烈变化？ 例如，在镶边中，第三个按钮的背景变为白色，边框样式会发生变化。

我想为这些按钮使用浏览器的默认样式，但希望能够向按钮添加背景图像，而不会使该按钮看起来与其他按钮完全不同，我不会添加图标。

Answer 1

覆盖浏览器用来设置默认值的 background 属性（浏览器设置样式的 CSS 优先级非常低）。这和做一样。

/* This will override browser styles. */
button
{
  background: grey;
}
/* This will override the above style */
button
{
  background: black;
}
/* This will override the above style */
button
{
  background: blue!important;
}

每个都比另一个具有更高的优先级，因此覆盖了它。