如何使用 CSS 停用數字輸入欄位上的箭頭按鈕？

停用輸入類型=「數字」屬性上的箭頭按鈕的CSS 技巧

使用者經常在桌面瀏覽器中的數字輸入字段上遇到箭頭按鈕例如Chrome 和Safari。然而，這些按鈕可能會破壞某些設計美學。我們可以使用 CSS 來停用它們嗎？

CSS 解決方案：

要停用旋轉按鈕，我們可以使用針對輸入欄位各部分的CSS 規則：

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

:: -webkit-inner-spin-button 的目標是內部箭頭按鈕，而::-webkit-outer-spin-button目標為外部箭頭按鈕。透過將 -webkit-appearance 設為 none，我們隱藏了按鈕。此外，將邊距設為 0 可確保刪除按鈕後不會留下多餘的空間。

額外的改進：

使用者報告，即使隱藏按鈕後，輸入欄位的右側保留了一個小空間。為了解決這個問題，我們需要瞄準旋轉器本身的邊距：

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

透過應用此規則，我們可以完全消除不需要的空間，從而為數位輸入欄位提供更乾淨、更精簡的設計。

以上是如何使用 CSS 停用數字輸入欄位上的箭頭按鈕？的詳細內容。更多資訊請關注PHP中文網其他相關文章！