在Chrome中设置HTML5数字输入(数字调整框)的样式
在Chrome中设置HTML5数字输入(数字调整框)的样式
提问于 2014-01-22 03:04:44
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.理想情况下，我只想去掉它们的边界半径。
有趣的是，填充似乎在这些按钮上起作用。我知道他们在听！
回答 1
Stack Overflow用户
发布于 2014-02-14 17:08:36
有很多方法可以做到这一点。这是一个纯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实现中是不可能的。
玩得开心!
Chrome编辑2015-01-18:改进的答案反映了 >= v39的变化。感谢@dtracers
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21266888
复制相关文章
相似问题
腾讯云开发者
