如何从输入类型编号中删除向上和向下箭头 - CSS

有时候我们需要使用自定义样式的input类型，而默认情况下输入类型带有向上和向下箭头，这时候如何去除这些箭头呢？

方法一：使用appearance属性

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

这个方法使用appearance属性，将-webkit-appearance设置为none即可去除箭头。

方法二：使用appearance和::-webkit-outer-spin-button

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

这个方法同样使用appearance属性，加上-webkit-outer-spin-button的伪类选择器来去除箭头。

方法三：使用::-webkit-inner-spin-button

input[type='number'] {
  -moz-appearance:textfield;
}

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

这个方法只使用了::-webkit-inner-spin-button选择器，同样可以去除箭头。

以上三种方法都可以去除箭头，具体使用哪种方法取决于个人喜好。