Chrome最近更新了其输入元素样式.我非常喜欢数字输入类型,但是它们的新风格为我们提供了圆形按钮,这些按钮不能完全适合方形输入框.
我已经多次尝试让这些输入改变,但他们不会让步.从输入[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.理想情况下,我只想删除它们的边界半径.
有趣的是,填充似乎适用于这些按钮.我知道他们在听!
解决方法
有办法实现这一目标.这是一个纯CSS解决方案:
http://jsfiddle.net/Volker_E/WwfW9/
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图像作为背景(因此小尺寸),但您可以添加您认为适合您需要的任何图像/ CSS属性.
唯一的问题是,你在可用性方面失去了一点,因为你无法单独设置上下按钮的样式,而你没有:hover和:将焦点样式放在一个按钮上.
这在Chrome目前的实施中是不可能的.
玩得开心!
编辑2015-01-18:改进了反映Chrome中的更改的答案> = v39.感谢@dtracers
原文地址:https://www.jb51.cc/css/216071.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。