防止在基於Webkit 的瀏覽器中顯示旋轉按鈕
在Web 開發中，經常會遇到跨瀏覽器相容性問題。當使用 時會出現這樣的問題。在基於 webkit 的瀏覽器（例如 Chrome 和 Safari）上。這些瀏覽器在數位輸入欄位的右側顯示不需要的旋轉按鈕。
使用 CSS 停用旋轉按鈕
要解決此問題，我們可以利用 CSS 停用旋轉按鈕這些瀏覽器上的旋轉按鈕。關鍵是要針對控制旋轉按鈕的外觀和行為的特定 CSS 屬性。
以下CSS 規則透過刪除旋轉按鈕外觀並將其邊距設為零來實現此目的：
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}全面的解決方案
最初，上述規則可能會為螢幕上的旋轉按鈕保留一個小空間右側。為了解決這個問題，還需要將輸入欄位的填入清除。因此，完整的 CSS 解決方案變為：
input[type=number] {
-webkit-appearance: none;
padding: 0;
margin: 0;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}透過實作此 CSS 規則，旋轉按鈕將被有效停用，從而在不同瀏覽器之間留下乾淨且一致的介面。
以上是如何從 Webkit 瀏覽器的數位輸入欄位中刪除旋轉按鈕？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
