5

如何隐藏input type=number元素，右侧的上下箭头

 2 years ago
source link: https://www.geekjc.com/post/5db954f69a264f2ea8f848be
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

如何隐藏input type=number元素，右侧的上下箭头

时间: 10/30/2019作者: ll浏览量: 797

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

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

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

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

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

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

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none;
  margin: 0; 
}
input[type=number] {
    -moz-appearance:textfield;
}

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK