如何在 Webkit 瀏覽器中隱藏數位輸入欄位上的旋轉按鈕？

在輸入類型=「數位」時停用Webkit 的旋轉按鈕

專門為行動裝置設計但也與桌面相容的網站時，存在某些挑戰出現。其中一個問題是在指定為數字的輸入欄位旁邊顯示不必要的旋轉按鈕。雖然此功能可能有利於快速增加或減少值，但它可能會損害某些設計的美觀。

要消除 Safari 和 Chrome 瀏覽器中的這些旋轉按鈕，建議採用 CSS 樣式技術，利用-webkit-外觀屬性。這是一個有效隱藏旋轉按鈕的解決方案：

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

透過將 -webkit-appearance 屬性設為“none”，旋轉按鈕在視覺上被停用，而不會影響數字輸入欄位的功能。這種客製化確保了乾淨且視覺上令人愉悅的設計，同時保持了預期的數位輸入功能。

此外，為了完全解決與輸入欄位相鄰的不需要的空間，不僅需要重置輸入本身的邊距還有旋轉按鈕。以下 CSS 程式碼段可實現此目的：

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

透過調整旋轉按鈕的外觀和邊距，實現了完全優化的數位輸入字段，從而增強了移動和桌面訪問者的用戶體驗。

以上是如何在 Webkit 瀏覽器中隱藏數位輸入欄位上的旋轉按鈕？的詳細內容。更多資訊請關注PHP中文網其他相關文章！