Debriefing [デブリーフィング]

Debriefing [デブリーフィング] はHTMLやCSSやデザインなどのWeb制作に関することや、仕事を効率化する方法や生活に役立つHow Toを発信します。

input type="number"で表示される矢印ボタン(スピンボタン)をCSSで消す方法

inputtype=numberで表示される矢印(スピンボタン)をCSSで消す方法

画像出典:W3C

input type="number"を使うと、入力欄の右側に矢印ボタン(スピンボタン)がデフォルトで表示されるようになります。

入力欄の右側に矢印ボタン(スピンボタン)が表示される

画像のように入力フォームの右側に、矢印が表示されるようになります。この矢印ボタンを押すと、数字が増減したりするので、一見便利そうに感じますが、デザイン的に微妙なのでCSSでサクッと取り除く方法を今回は紹介します。

 

目次

CSSでの解決方法

Chrome・Safariの場合

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

FireFox・IEの場合

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

これだけで矢印ボタンを非表示にすることができます。ブラウザによってCSSの記述方法が違うのでそれぞれ指定しましょう。

input type="number"とは

inputタグのtype属性の1つである「number」は、電話番号や郵便番号などの数値を入力する時に使用される、HTML5から新たに加わったtype属性です。

input type="number"を使うと入力する文字を数字やアルファベットに制限することが可能です。ちなみにスマートフォンでinput type="number"が実装された入力フォームに文字を入力しようとすると、スマホの文字パットが初期段階で数字入力に切り替わるのでユーザビリティ的にも良い実装方法です。

 

© Debriefing 2019 All Rights Reserved.