在一些情況下,我們可能需要設置css文本框不允許輸入數字,比如在表單中,有些輸入框必須只能輸入文字,不能輸入數字。這時我們可以通過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; } input[type=number]:Focus { background-color:white; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; }
上面是一個簡單的 CSS 代碼,它使用了偽類選擇器來覆蓋了文本框默認的一些樣式,達到了禁止輸入數字的目的。
在這個代碼中,我們使用了偽類選擇器來選取了所有的 type 為 number 的輸入框。在這樣的輸入框中,瀏覽器會默認顯示一個調整數字大小的按鈕,我們使用-webkit-appearance:none來取消了該按鈕;同時,為了確保該輸入框呈現文本框的樣式,我們使用-moz-appearance:textfield代碼實現了該效果。
在實際應用中,我們可以根據具體需求進行設置。
上一篇css文本框后面帶紅x
下一篇css文本框可拉伸