默认浏览器按钮背景颜色

Question

请查看以下按钮：

它们没有样式，看起来很不错（第二个是鼠标悬停）。

我可以以某种方式保持他们的外表，但改变背景颜色吗？

如果我通过CSS background-color属性执行此操作，我会得到：

哪个看起来不像其他的（它不是圆形的，颜色是平的，没有内部发光）......

Answer 1

每个浏览器都有自己的样式。但是使用css你可以实现它。请检查以下内容：

input {-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.16, rgb(207,207,207)),
    color-stop(0.79, rgb(252,252,252))
);
background-image: -moz-linear-gradient(
    center bottom,
    rgb(207,207,207) 16%,
    rgb(252,252,252) 79%
);
padding:3px;
border:1px solid #000;}

更新

带有:hover的css按钮的更新版本以及@xec在评论中发布的精彩网站的渐变。

演示： http://jsfiddle.net/Ekf5b/1

有用的渐变生成器：http://gradients.glrzad.com/

其他一些信息：第一步是添加圆角。要设置圆角，即可以使用css3pie。然后使用任何引用的工具添加渐变。最后，由于显而易见的原因，我添加了padding，并border覆盖了浏览器的默认值。

Answer 2

默认情况下，按钮会应用一些padding和border设置。您还需要编辑这些设置以使按钮保持相同。从浏览器到浏览器也可能看起来不同。

查看Firefox中的Web调试器（通过获取firebug）或Google Chrome，右键单击并检查元素。这将显示添加到按钮的默认css，以便您可以看到如何编辑它们