首页
Javascript
Html
Css
Node.js
Electron
移动开发
工具类
服务端
浏览器相关
前端收藏
其他

隐藏input type=number元素,右侧的上下箭头

2015年08月21日 发布 阅读(431) 作者:懒炖

移动端开发时,经常会用 input=tel代替input=number来调用数字键盘 。

如验证码时,我们可以用type=tel调用拨号键盘

  1. <input type="tel" maxlength="4" name="codeImg" id="codeImg" value="" />

但如果要输入金额时,iphone下,type=tel调用的拨号键盘不能输入小数点。这时候我们就需要用到type=number。

  1. <input id="amount" type="number" maxlength="4" name="amount" value="" />

但type=number右侧会有两个“难看”的箭头,当我们不需要这个箭头时,可以用CSS来隐藏

  1. input[type=number]::-webkit-inner-spin-button,
  2. input[type=number]::-webkit-outer-spin-button {
  3. -webkit-appearance: none;
  4. margin: 0;
  5. }
  6. input[type=number] {
  7. -moz-appearance:textfield;
  8. }
版权声明:本站文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议,如需转载,请注明出处

评论

  •