HTML5数値入力のスピンボックスを非表示にできますか？

一部のブラウザー（Chromeなど）がタイプ番号のHTML入力用にレンダリングする新しいスピンボックスを非表示にする一貫した方法はありますか？上/下矢印が表示されないようにするためのCSSまたはJavaScriptメソッドを探しています。

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

この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"の結果を示しています。

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">

簡潔な答え：

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：

Firefoxの現在のバージョンでは、これらの要素の-moz-appearanceプロパティの（ユーザーエージェント）デフォルト値はnumber-inputです。これを値に変更すると、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-appearanceプロパティの値に変更する必要がありますnone上::-webkit-outer-spin-button/の::-webkit-inner-spin-button疑似クラス（それは-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" />

古いバージョンのChromeでmargin: 0マージンを削除するために使用されることを指摘する価値があります。

現在、これを書いている時点で、「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;
}

AppleのモバイルSafari向けのユーザーエクスペリエンスコーディングガイドによると、以下を使用してiPhoneブラウザーに数字キーボードを表示できます。

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

patternのは\d*また動作します。

input type="tel"代わりに使用してみてください。キーボードに数字が表示され、スピンボックスは表示されません。JavaScript、CSS、プラグインなどは必要ありません。

この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;
}

私はこの問題に遭遇しました input[type="datetime-local"]似ているでこの問題が発生しました。

そして、私はこの種の問題を克服する方法を見つけました。

最初に、「DevTools-> Settings-> General-> Elements-> Show user agent shadow DOM」でchromeのシャドウルート機能をオンにする必要があります。

次に、すべてのシャドウされた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>

これらの情報によると、@ Joshが言ったように、CSSをドラフトして不要な要素を非表示にすることができます。

あなたが要求したものではありませんが、スピンボックスを使用した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";
}

それはあなたがあなたが必要とするものを助けるためのアイデアを与えるかもしれません。

これは私がマウスオーバーとマウスオーバーなしで提案したいより良い答えです

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; }

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のソリューションを作成するのにも問題があります。

UbuntuのFirefoxでは、

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

私のためにトリックをしました。

追加

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

に私を導きます

不明な疑似クラスまたは疑似要素「-webkit-outer-spin-button」。セレクターが正しくないため、ルールセットは無視されました。

毎回試してみました。内側のスピンボタンについても同じです。

スピナーが不要な場合は、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';

それは私の目的のためにうまくいきました

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; 
}

これが機能するために必要でした

/* 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私にとって鍵でした。

私は使用して超簡単な解決策を見つけました

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

これはほとんどのブラウザーでサポートされています：https : //developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode