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; }

似乎他们可能根本无法改变。有任何人对此有经验吗？ I know there's a way to hide the buttons.理想情况下，我只想删除边界半径。

有趣的是，填充似乎适用于这些按钮。我知道他们在听！

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和{{1}单个按钮上的样式。
这在Chrome目前的实施中根本不可能。

玩得开心！

修改2015-01-18：改进了反映Chrome更改的答案＆gt; = v39。感谢@dtracers

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

1 个答案: