html5旋转的样式,css – 在Chrome中设置HTML5数字输入(旋转框)的样式

有办法实现这一目标.这是一个纯CSS解决方案：

http://jsfiddle.net/Volker_E/WwfW9/

如您所见,您的案例中的神奇CSS属性/值是-webkit-appearance：none;.

通过旋转按钮失去其默认外观.而且你可以(几乎)以你想要的方式进行风格设计.

/* Spin Buttons modified */

input[type="number"].mod::-webkit-outer-spin-button,input[type="number"].mod::-webkit-inner-spin-button {

-webkit-appearance: none;

background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKUlEQVQYlWNgwAT/sYhhKPiPT+F/LJgEsHv37v+EMGkmkuImoh2NoQAANlcun/q4OoYAAAAASUVORK5CYII=) no-repeat center center;

position: absolute;

top: 0;

right: 0;

bottom: 0;

width: 1em;

border-left: 1px solid #bbb;

opacity: .5; /* shows Spin Buttons per default (Chrome >= 39) */

}

我添加了一个数据URI图像作为背景(因此小尺寸),但您可以添加您认为适合您需要的任何图像/ CSS属性.

唯一的问题是,你在可用性方面失去了一点,因为你无法单独设置上下按钮的样式,而你没有：hover和：将焦点样式放在一个按钮上.

这在Chrome目前的实施中是不可能的.

玩得开心！

编辑2015-01-18：改进了反映Chrome中的更改的答案> = v39.感谢@dtracers