默认浏览器按钮背景颜色

Ale*_*lex 5 css browser input colors background-color

所以看看这些按钮:

在此输入图像描述

他们没有风格,看起来很不错(第二个是鼠标悬停).

我可以以某种方式保持他们的外观,但改变背景颜色?

如果我通过CSS的background-color属性这样做我得到这个:

在此输入图像描述

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

Sot*_*ris 9

每个浏览器都有自己的样式.但是使用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;}
Run Code Online (Sandbox Code Playgroud)

UPDATE

:hover来自@xec在评论中发布的伟大网站的css按钮的更新版本和渐变.

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

有用的梯度发生器:http://gradients.glrzad.com/

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

  • 这个渐变生成器也很不错,增加了对大多数浏览器的支持(包括旧的ie)并包含一些预设:http://www.colorzilla.com/gradient-editor/ (3认同)