移除input type="number"的上下箭头

使用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;
}   
原文地址:https://www.cnblogs.com/wildorchid/p/4727181.html