web-dev-qa-db-ja.com

HTML5番号入力のスピンボックスを隠すことはできますか？

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

<input id="test" type="number">
javascriptcsshtml5inputnumbers
831
Alan

このCSSはウェブキットブラウザ用のスピンボタンを効果的に隠します（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" />

あなたはいつでもあなたが興味を持っている要素のために一致したCSSプロパティを探すためにインスペクタ（webkit、おそらくFirefoxのためのFirebug）を使うことができます、疑似要素を探します。この画像は、入力要素type = "number"の結果を示しています。

Inspector for input type=number (Chrome)

931
antonj

Firefox 29では現在number要素のサポートが追加されているので、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">
403
swehren

短い答え：

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/::-webkit-outer-spin-button疑似クラスで::-webkit-inner-spin-buttonプロパティの値を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の older バージョンの余白を削除するために使用されることを指摘する価値があります。

現在これを書いている時点で、これは '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;
}
326
Josh Crozier

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

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

\d*のpatternname__も機能します。

120
team_steve

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

36
MERT DOĞAN

数字の入力時にスピナーを削除するには、この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;
}
10
Sanjib Debnath

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

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

まず、 "DevTools - >設定 - >一般 - >要素 - > Show user agent shadow DOM"でクロムのshadow-root機能を有効にする必要があります。

これで、すべての shadowed DOM要素 を見ることができます。たとえば、<input type="number">の場合、shadowed 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>

shadow DOM of input[type="number"

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

8
Xiao Hanyu

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

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; }
3
Swap-IOS-Android
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
     -webkit-appearance: none;
<input id="test" type="number">
3
Prince Sharma

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

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

3
Gaurav

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」。不適切なセレクタが原因でルールセットが無視されました。

私が試したたびに。内側のスピンボタンについても同じです。

2
sonny_boy

Safariでこれを機能させるために、！Webkitの調整に重要！を追加すると、スピンボタンが非表示になります。

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のための解決策を作成することにまだ苦労しています。

1
luckychii

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

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

0
user3121518

あなたはあなたのCSSファイルの中でこの単純なコードを使うことができます：

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