如何在 HTML5 數位輸入中隱藏旋轉框？

在HTML5 數位輸入中隱藏旋轉框

在當今的Web 開發環境中，HTML5 的數位輸入類型提供了一種捕獲數位使用者輸入的便捷方法。但是，某些瀏覽器（包括 Chrome）會在輸入欄位旁邊呈現向上/向下旋轉箭頭。雖然這些箭頭在某些情況下可能有用，但在某些情況下可能不需要它們。

CSS 和 JavaScript 方法

有多種方法可以隱藏旋轉HTML5 數位輸入欄位中的方塊。 CSS 和 JavaScript 提供了有效的解決方案：

CSS 方法

CSS 提供了一個簡單的解決方案來隱藏旋轉按鈕。以下CSS 規則刪除了Chrome 和Safari 等Webkit 瀏覽器的旋轉框外觀：

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0; /* Adjust if necessary to remove any lingering margins */
}

此外，為了與Firefox 實現最佳兼容性，需要另一個CSS 規則：

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

JavaScript 方法

或者，JavaScript 也可用於隱藏旋轉框。此方法涉及修改輸入欄位的DOM 屬性：

const input = document.querySelector('input[type="number"]');
input.style.appearance = 'none';

結論

CSS 和JavaScript 都提供了隱藏HTML5 數位輸入欄位中的旋轉框的有效方法。透過自訂輸入的外觀，開發人員可以創建更客製化的使用者介面，以滿足其應用程式的特定需求。

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