CSS 輸入框為手機號

input[type="tel"] {
/* 禁用自動填充 */
-webkit-autofill, -webkit-autofill:hover, -webkit-autofill:focus {
box-shadow: none;
-webkit-box-shadow: none;
-webkit-text-fill-color: #333;
}
/* 隱藏數字按鈕 */
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
-webkit-appearance: none;
}
/* 觸發自定義清除按鈕 */
:not(:focus):not(:placeholder-shown) + span {
opacity: 1;
}
/* 隱藏自定義清除按鈕 */
span {
opacity: 0;
}
}

如果您正在創建一個需要用戶輸入手機號的網站或應用程序，我們建議使用 CSS 樣式將其輸入框設置為專用的電話號碼類型。

與通用文本輸入框不同的是，電話號碼輸入框可以確保用戶輸入的是有效的電話號碼，因為瀏覽器會驗證用戶輸入是否符合電話號碼格式。此外，電話號碼輸入框還為移動用戶提供了易于使用的數字鍵盤，減少了誤輸入的可能性。

使用上面的代碼，您可以自定義電話號碼輸入框的樣式。其中包括禁用自動填充、隱藏數字按鈕、觸發自定義清除按鈕和隱藏自定義清除按鈕等等。

總之，使用 CSS 輸入框為手機號是一種優秀的方式，它可以簡化用戶的輸入，增強用戶體驗，并提高系統的可靠性。