如何從 Webkit 瀏覽器的數位輸入欄位中刪除旋轉按鈕？

防止在基於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中文網其他相關文章！