如何隱藏 HTML5 數位輸入上的旋轉框？

隱藏HTML5 數位輸入的旋轉框

Chrome 等現代瀏覽器通常會在HTML5 數位輸入旁顯示旋轉框，以便於調整值。然而，這些旋轉框有時會幹擾使用者介面。

隱藏旋轉框的一種方法是透過CSS：

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}

此CSS 有效地隱藏了Webkit 瀏覽器中的旋轉框（例如、Chrome 和Safari），同時使用- moz-appearance:textfield 屬性可確保與Firefox 的兼容性。

透過實現此 CSS，您可以防止顯示向上/向下箭頭，為您的數位輸入提供更乾淨、更精簡的使用者介面。

以上是如何隱藏 HTML5 數位輸入上的旋轉框？的詳細內容。更多資訊請關注PHP中文網其他相關文章！