CSSで input type=”number” のスピンボタンをカスタマイズ!コード例

数値入力の input[type="number"] を作ったとします。

▼ 例えばこんな感じで定義できる

▼ デフォルト状態のスピンボタン

デフォルト状態の数値nputのスピンボタン例。少しダサい

このスピンボタンは問題点があります。

  • なんかデザインが少しだけダサい
  • というかブラウザ依存になってしまう
  • あとスマホでは一切表示されない

デフォルトだと上下矢印が表示されるだけだし、なによりスマホだと一切表示されないのが不便です。同じ考えの人は多いはずです。

そこでカスタマイズを試してみました。

▼ アレンジ後のスピンボタン例

カスタマイズ後の数値inputのスピンボタン例。スマホでも表示されるしお洒落になった

このinput type="number"のスピンボタン、
それをカスタマイズする方法を紹介します。

手順1.スピンボタン用にinputのHTML構成を変更する

この方法ではHTML構成そのものに手を加えます。

▼ 変更前 : inputタグが1つだけあるだけ

▼ 変更後 : 次のような感じのHTML構成に変更

各要素について簡単に説明します。

  • .number-spinner-wrap
    全体(input、左右スピンボタン)を囲むための要素。ここではlabelを使っているがdiv要素で囲んだとしても問題ない
  • .input
    変更前のinput要素と同じ。この例では step="2" を指定してるから、スピンボタン押下時に±2だけ増減させたい。
  • .spinner-down, .spinner-up
    カスタマイズされたスピンボタン。前者がクリックされたら数値を -2 、後者がクリックされたら数値を +2 する(デフォルト挙動に合わせる)

各要素はこういった役割を持ってます。

はじめはinput要素だけでカスタマイズしようと試したのですが、やはりラップ要素で囲んでスピンボタン要素を新しく追加する方法に落ち着きました。

このようなHTML構成にします。

手順2.input用のカスタマイズCSSを追加する

次にカスタマイズCSSを追加します。

▼ inputのカスタマイズCSS例

特に説明するような箇所はありません。

長いだけで地道にカスタマイズしてるだけです。

でも1つだけ強調するなら input::-webkit-outer-spin-button, input::-webkit-inner-spin-button  でデフォルトのスピン要素を隠してることですね。

それ以外は特筆することは本当にありません。

手順3.スピンボタン押下時の処理コードを追加する

これだけだとスピンボタンは機能しません。

スピンボタン押下時のJavaScriptコードを追加します。

▼ このようなJavaScriptコード

スピンボタン押下時の処理を定義してます。

重要なのは $input.stepDown()  、 $input.stepUp()  を使うことでデフォルト挙動を再現してることです。スピンボタン押下時にinputの数値を操作できます。

これでカスタマイズはすべて完了です

実際のスピンボタンの挙動はこんな感じ(動画)

実際の見た目・挙動とかを載せておきます。

▼ デフォルトはダサい見た目だったのに……

▼ カスタマイズでこんな素敵な見た目に!

▼ 実際に動かしている様子(GIF)

カスタマイズ後の input type=number のスピンボタン動作例。デフォルトのスピンを押下した時と同じように機能するし、スマホでも隠れないから親切

スピンボタンが常時表示されるようになり、デフォルトのスピンを押下した時と同じように機能します。あとスマホでも隠れないから親切ですね。

以上、ここまでがカスタマイズ手順でした。

CSS

Shareこの記事をシェアしよう!

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください