飞龙博客

feilong.org 前端开发教程

css或html5怎样移除input type number 上下小箭头

飞龙更新于 2021-01-22 02:40 加入书签 CTRL+D 有 88 个朋友来过

怎样移除 HTML5 input 在 type="number" 时的上下小箭头?
飞龙试了一下,主要有2种方法,可以移除此数字下拉框type="number" 右边的上下小箭头。

方法1:
将 type="number" 改为 type="tel"
同样只能输入数字,弹出数字键盘,但是不出现上下箭头,很好。

<input type="tel" name="numIs" value="1" maxlength="1" />

方法2:
针对 input type="number" 的元素 ,添加 spin0 的样式名即可。

1
2
3
.spin0{-moz-appearance:textfield;}
.spin0::-webkit-outer-spin-button,
.spin0::-webkit-inner-spin-button{-webkit-appearance:none}
<input type="number" class="spin0" name="numIs" value="1" maxlength="1" />

是不是很简单?

飞龙初发:
2008-03-18 12:39
本文更新网址:
https://feilong.org/css-html5-input-type-number-arrows

所在目录: html css 教程

新作:

  • html css js
  • angular react vue
  • flutter python