Html 在 Chrome 中样式化 HTML5 数字输入（旋转框）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21266888/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Styling HTML5 number input (spin box) in Chrome
提问by Vael Victus
Chrome recently updated its input element styles. I really like the numberinput type, but their new style gives us rounded buttons that don't fit neatly into square input boxes.
Chrome 最近更新了其输入元素样式。我真的很喜欢number输入类型，但它们的新样式为我们提供了无法整齐地放入方形输入框的圆形按钮。
I've put in many attempts to get these inputs to change, but they won't budge. From the input[type='number']itself to these buttons:
我已经进行了很多尝试来改变这些输入，但它们不会让步。从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; }
It seems they may not be able to change at all. Does anyone have experience with this? I know there's a way to hide the buttons.Ideally I just want to remove their border-radius.
似乎他们根本无法改变。有任何人对此有经验吗？我知道有一种方法可以隐藏按钮。理想情况下，我只想删除它们的边界半径。
Interestingly, padding seems to work on these buttons. I know they're listening!
有趣的是，填充似乎对这些按钮起作用。我知道他们在听！
回答by Volker E.
There are ways to accomplish that. Here's a pure CSS solution:
http://jsfiddle.net/Volker_E/WwfW9/
有办法做到这一点。这是一个纯 CSS 解决方案：http:
//jsfiddle.net/Volker_E/WwfW9/
As you can see, the magic CSS property/value in your case is -webkit-appearance: none;.
Through that the Spin Buttons lose their default appearance. And you're able to style in (nearly) every way you want to.
如您所见，您的案例中神奇的 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) */
}
I've added a Data URIimage as background(therefor the small size), but you can add whatever image/CSS property you think is fitting your needs.
我已经添加了一个数据 URI图像background（因此尺寸较小），但是您可以添加您认为适合您需要的任何图像/CSS 属性。
Only problem remaining is, that you're losing a bit on usability side, as you're not able to style the up and down button separately, and you don't have :hoverand :focusstyles on a single button.
That's simply not possible with current implementation in Chrome.
唯一剩下的问题是，您在可用性方面失去了一点，因为您无法分别设置向上和向下按钮的样式，并且您没有在单个按钮上设置:hover和:focus样式。
Chrome 中的当前实现根本不可能做到这一点。
Have fun!
玩得开心！
Edit 2015-01-18: Improved answer reflecting changes in Chrome >= v39. Thanks to @dtracers
编辑 2015-01-18：改进的答案反映了 Chrome >= v39 中的变化。感谢@dtracers
