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.理想情况下,我只想删除它们的边界半径。
有趣的是,填充似乎适用于这些按钮。我知道他们在听!
有办法实现这一目标。这是一个纯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
和:focus
样式。
这在Chrome目前的实施中根本不可能实现。
玩得开心!
编辑2015-01-18:改进了反映Chrome中更改的答案> = v39。感谢@dtracers