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

看来他们可能根本无法改变。这个事情谁有经验？ 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) */
}

我添加了一个 Data URI 图像作为 background(因此尺寸较小)，但您可以添加您认为适合您需要的任何图像/CSS 属性。

唯一剩下的问题是，您在可用性方面有所损失，因为您无法分别设置向上和向下按钮的样式，并且您没有 :hover 和:focus 样式在一个按钮上。
这在 Chrome 中的当前实现是根本不可能的。

玩得开心!

编辑 2015-01-18:改进的答案反射(reflect)了 Chrome >= v39 中的变化。感谢@dtracers