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

Question

Chrome最近更新了其输入元素样式.我非常喜欢number输入类型,但是它们的新风格为我们提供了圆形按钮,这些按钮不能完全适合方形输入框.

我已经多次尝试让这些输入改变,但他们不会让步.从它input[type='number']自己到这些按钮:

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    border-radius: none !important; background: black; color: red;
}

input:-webkit-autofill { background: black; color: red; }

看起来他们可能根本无法改变.有任何人对此有经验吗？我知道有一种隐藏按钮的方法.理想情况下,我只想删除它们的边界半径.

有趣的是,填充似乎适用于这些按钮.我知道他们在听!

Answer 1

有办法实现这一目标.这是一个纯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图像background(因为它的尺寸很小),但你可以添加你认为适合你需要的任何图像/ CSS属性.

唯一剩下的问题是,你正在失去对可用性的一面位,因为你不能够单独样式上下按钮,你不必:hover和:focus风格上的一个按钮.
这在Chrome目前的实施中根本不可能实现.

玩得开心!

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