[javascript] HTML5番号入力のスピンボックスを非表示にすることはできますか?


5 Answers

Firefox 29は現在、数値要素のサポートを追加しているので、WebkitとMozillaベースのブラウザでスピナーを隠すためのスニペットを以下に示します。

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

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
<input id="test" type="number">

Question

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

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



これは、私がマウスの上にマウスの上に、マウスの上にない

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






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

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




この機能を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のソリューションを試すのに苦労しています。




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

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

まず、 "DevTools - >設定 - >一般 - >要素 - >ユーザーエージェントシャドウDOMの表示"で、クロムのシャドウルート機能を有効にする必要があります。

次に、たとえば<input type="number"> 、すべての陰影付けされたDOM要素を見ることができます。 陰影付けされた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をドラフトすることができます。




Related