使用html5的新控件input type="number"时,浏览器中看到其会自带上下箭头,有时UI设计的需要是采用另外的样式,只能想办法将其隐藏,放置另外的button,用js来控制。
参照:伪元素控制表单样式
http://www.w3cplus.com/css3/list-of-pseudo-elements-to-style-form-controls.html
input[type=number]
WebKit
Webkit通过默认的数字选择器提供下拉列表一个控制。伪元素::-webkit-textfield-decoration-container, ::-webkit-inner-spin-button 和 ::-webkit-outer-spin-button提供定制化样式。虽然不能对这样的元素做过多的控制,但是至少可以隐藏掉下来
<input type="number">
::-webkit-textfield-decoration-container { }
::-webkit-inner-spin-button {
-webkit-appearance: none;
}
::-webkit-outer-spin-button {
-webkit-appearance: none;
}