我可以隱藏 HTML5 數字輸入的旋轉框嗎？

Question

跨瀏覽器是否有一致的方法來隱藏某些瀏覽器（例如 Chrome）為數字類型的 HTML 輸入呈現的新旋轉框？ 我正在尋找一種 CSS 或 JavaScript 方法來防止出現向上/向下箭頭。

<input id="test" type="number">

Answer 1

此 CSS 有效地隱藏了 webkit 瀏覽器的旋轉按鈕（已在 Chrome 7.0.517.44 和 Safari 版本 5.0.2 (6533.18.5) 中對其進行了測試）：

 input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { /* display: none; <- Crashes Chrome on hover */ -webkit-appearance: none; margin: 0; /* <-- Apparently some margin are still there even though it's hidden */ } input[type=number] { -moz-appearance:textfield; /* Firefox */ }

 <input type="number" step="0.01" />

您始終可以使用檢查器（webkit，可能是 Firefox 的 Firebug）為您感興趣的元素查找匹配的 CSS 屬性，查找 Pseudo 元素。 此圖顯示了輸入元素 type="number" 的結果：

Answer 2

Firefox 29 當前增加了對數字元素的支持，所以這里有一個在基於 webkit 和 moz 的瀏覽器中隱藏微調器的片段：

 input[type='number'] { -moz-appearance:textfield; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; }

 <input id="test" type="number">

Answer 3

簡短的回答：

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

 <input type="number" />

更長的答案：

要添加到現有答案...

火狐：

在當前版本的 Firefox 中，這些元素的-moz-appearance屬性的（用戶代理）默認值為number-input 。 將其更改為 value textfield有效地刪除了微調器。

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

在某些情況下，您可能希望最初隱藏微調器，然后出現在懸停/焦點上。 （這是當前 Chrome 中的默認行為）。 如果是這樣，您可以使用以下內容：

 input[type="number"] { -moz-appearance: textfield; } input[type="number"]:hover, input[type="number"]:focus { -moz-appearance: number-input; }

 <input type="number"/>

---

鉻合金：

在當前版本的 Chrome 中，這些元素的-webkit-appearance屬性的（用戶代理）默認值已經是textfield 。 為了移除微調器，需要在::-webkit-outer-spin-button / ::-webkit-inner-spin-button偽類上將-webkit-appearance屬性的值更改為none （它是-webkit-appearance: inner-spin-button ）。

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

 <input type="number" />

值得指出的是， margin: 0用於刪除舊版Chrome 中的邊距。

目前，在撰寫本文時，這是“inner-spin-button”偽類的默認用戶代理樣式：

input::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button;
    display: inline-block;
    cursor: default;
    flex: 0 0 auto;
    align-self: stretch;
    -webkit-user-select: none;
    opacity: 0;
    pointer-events: none;
    -webkit-user-modify: read-only;
}

Answer 4

根據Apple 的移動 Safari 用戶體驗編碼指南，您可以使用以下方法在 iPhone 瀏覽器中顯示數字鍵盤：

<input type="text" pattern="[0-9]*" />

\d*的pattern也可以工作。

Answer 5

我找到了一個超級簡單的解決方案

<input type="text" inputmode="numeric" />

大多數瀏覽器都支持此功能：

• https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode

• https://caniuse.com/input-inputmode

Answer 6

嘗試使用input type="tel"代替。 它會彈出一個帶有數字的鍵盤，並且不顯示旋轉框。 它不需要 JavaScript 或 CSS 或插件或其他任何東西。

Answer 7

僅添加此 css 以在輸入數字時刪除微調器

/* For Firefox */

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



/* Webkit browsers like Safari and Chrome */

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

Answer 8

如果您試圖隱藏瀏覽器添加的控件，則應該暗示您在濫用該輸入類型。

標准一致性問題

來自type=number 的 HTML 規范：

type=number狀態不適合僅包含數字但嚴格來說不是數字的輸入。 例如，它不適用於信用卡號或美國郵政編碼。

（重點是我的）

可用性問題

在 GOV.UK 團隊進行的可用性研究中發現<input type=number>存在問題。 該團隊維護着世界上最著名的設計系統之一，並得出以下結論：這種輸入類型：

• 使用 Dragon Naturally speak 時無法聽寫或選擇
• 在 NVDA 的元素列表中顯示為未標記
• 在 NVDA 的對象導航中顯示為一個旋轉按鈕，其中有一個編輯字段和兩個按鈕- 這些按鈕沒有標簽，但減少/增加值
• 使用 nvda+tab 時報告為未標記的編輯字段

替代解決方案

相反，他們建議使用<input type="text" inputmode="numeric" pattern="[0-9]*">這歸結為@team_steve 和@youjin 的組合答案。 這不僅隱藏了旋轉框，還提高了元素的整體可用性。

不用說需要進行額外的驗證，以及有用的錯誤文本。

 <label>Postal Code <input type="text" inputmode="numeric" pattern="[0-9]*" size="5"> </label>

Answer 9

我遇到了input[type="datetime-local"]的這個問題，這與這個問題類似。

我已經找到了克服這類問題的方法。

首先，您必須通過“DevTools -> Settings -> General -> Elements -> Show user agent shadow DOM”打開 chrome 的 shadow-root 功能

然后你可以看到所有被遮蔽的 DOM 元素，例如，對於<input type="number"> ，帶有被遮蔽 DOM 的完整元素是：

 <input type="number"> <div id="text-field-container" pseudo="-webkit-textfield-decoration-container"> <div id="editing-view-port"> <div id="inner-editor"></div> </div> <div pseudo="-webkit-inner-spin-button" id="spin"></div> </div> </input>

根據這些信息，您可以起草一些 CSS 來隱藏不需要的元素，就像 @Josh 所說的那樣。

Answer 10

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

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

資源

Answer 11

為了在 Safari 中進行這項工作，我發現在webkit調整中添加!important會強制隱藏旋轉按鈕。

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none !important;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

我仍然無法為 Opera 制定解決方案。

Answer 12

不是您要求的，但我這樣做是因為 WebKit 中帶有旋轉框的焦點錯誤：

// temporary fix for focus bug with webkit input type=number ui
if (navigator.userAgent.indexOf("AppleWebKit") > -1 && navigator.userAgent.indexOf("Mobile") == -1)
{
    var els = document.querySelectorAll("input[type=number]");
    for (var el in els)
        el.type = "text";
}

它可能會給你一個想法來幫助你滿足你的需要。

Answer 13

這是更好的答案，我想建議鼠標懸停和沒有鼠標懸停

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

Answer 14

在 WebKit 和基於 Blink 的瀏覽器和所有類型的瀏覽器中使用以下 CSS ：

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

Answer 15

當您不想要微調器時，也許可以將使用 javascript 的數字輸入更改為文本輸入；

document.getElementById('myinput').type = 'text';

並停止用戶輸入文本；

  document.getElementById('myinput').onkeydown = function(e) {
  if(!((e.keyCode > 95 && e.keyCode < 106)
    || (e.keyCode > 47 && e.keyCode < 58) 
    || e.keyCode == 8
    || e.keyCode == 9)) {
          return false;
      }
  }

然后讓 javascript 將其更改回來，以防您確實需要微調器；

document.getElementById('myinput').type = 'number';

它對我的目的很有效

Answer 16

在 Firefox for Ubuntu 上，只需使用

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

為我做了伎倆。

添加

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

會引導我

未知的偽類或偽元素“-webkit-outer-spin-button”。 由於選擇器錯誤，規則集被忽略。

每次我嘗試。 內部旋轉按鈕也是如此。

Answer 17

我需要這個來工作

/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button
  -webkit-appearance: none
  appearance: none
  margin: 0

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

appearance: none是關鍵。

Answer 18

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

 <input id="test" type="number">

Answer 19

對我來說，在 chrome 上沒有任何效果，但display: none 。

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
  display: none;
}

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

感謝@philfreo 在評論中指出這一點。

Answer 20

這就像你的 CSS 代碼：

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

Answer 21

您可以在CSS文件中使用這個簡單的代碼：

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