HTML input type="number" 隱藏預設的步進箭頭

number 類型的 <input> 元素用於讓用戶輸入一個數字，其包括內置驗證以拒絕非數字輸入。

瀏覽器可能會選擇提供步進箭頭，讓用戶可以使用滑鼠增加和減少輸入的值，或者只需用指尖敲擊即可。但有些場景需要隱藏預設的步進箭頭。

要隱藏 HTML input 元素的預設步進箭頭，可以使用 CSS 的 appearance 屬性。該屬性用於定義元素的外觀，包括預設的瀏覽器外觀，可以將其設置為 none，以隱藏預設的步進箭頭。

以下是一個示例 CSS 代碼，用於隱藏輸入類型為數字的 input 元素的預設步進箭頭：

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

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

這段代碼中，-moz-appearance: textfield 用於恢復 Firefox 瀏覽器中的預設樣式，以便在隱藏預設步進箭頭的同時保留輸入框的樣式，而 -webkit-appearance: none 則用於隱藏 Safari 瀏覽器中的預設步進箭頭。同時，為了確保在不同瀏覽器中都能正確隱藏預設步進箭頭，還需要設置 margin: 0。

在實際使用中，可以將這段 CSS 代碼添加到樣式表中，或者將其添加到頁面的 <style> 標簽中。如果只想針對某些特定的 input 元素隱藏預設步進箭頭，可以使用更具體的 CSS 選擇器，例如 input[name=age]，其中 name 屬性的值為輸入框的名稱。

作者：飛仔FeiZai

出處：https://www.cnblogs.com/yuzhihui/p/17339424.html

聲明：歡迎任何形式的轉載，但請務必註明出處！！！