1. 程式人生 > >移除input在type="number"時的上下箭頭

移除input在type="number"時的上下箭頭

如果 效果 限定 需要 span bsp inner spin inpu

網頁在有些情況下,會需要input的輸入的為單純數字的文本框,此時type=number,但使用type=number時,輸入框後面會有一個上下箭頭,那麽如何去掉上下箭頭呢?

1、chrome瀏覽器移除

input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
        -webkit-appearance:textfield;
}

使用none替代textfield,也可以實現去除箭頭的效果

2、firefox瀏覽器下移除

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

在firefox瀏覽器下使用none替代textfield沒有效果。

3、用type="tel"代替

  input[type="tel"]的value值亦是number,且其沒有type="number"時的上下箭頭,故我們可以用[type="tel"]代替[type="number"],達到一樣的效果,並通過設置maxlength = "m"限定value值得長度。如果有其他的要求,可以通過正則來判斷。

移除input在type="number"時的上下箭頭