セレクトボックス

Web

2022年11月25日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は「セレクトボックス」について書きます。

セレクトボックスとは

問い合わせフォームとかでよく見る、プルダウンで複数の選択肢が表示されてそこから1つを選ぶアレです。

生年月日とか都道府県とかがセレクトボックスになっているパターンがありますね。九州は下の方にあるので選ぶのがマジで大変

ラジオボタンと似ていますが、こちらは最初は1つの選択肢だけが表示されていて、クリックすると選択肢のリストが現れます。

基本形

<select>と<option>を使います。

<select>
  <option>・・・</option>
   ・
   ・
   ・
  <option>・・・</option>
</select>

<option>に選択肢を入れていきます。

<select>
  <option>選択してください</option>
  <option>ジョナサン・ジョースター</option>
  <option>ジョセフ・ジョースター</option>
  <option>空条承太郎</option>
  <option>東方仗助</option>
  <option>ジョルノ・ジョバァーナ</option>
  <option>空条徐倫</option>
  <option>ジョニィ・ジョースター</option>
  <option>東方定助</option>
  <option>ジョディオ・ジョースター</option>
</select>

それぞれの<option>にはvalue属性を指定できます。選択肢を選んだ時に、value属性の値を取得することができます。

1番目の<option>がデフォルトで表示されます（上の例だと「選択してください」）
selected属性を指定すると、任意の項目を初期値にできます。

1番目の<option>のvalueは空欄にして、さらにhiddenとdisabledを指定しておくとよいと思います。Safariだと表示されちゃってますが

<select>
  <option value="" hidden disabled selected>選択してください</option>
  <option value="jojo1">ジョナサン・ジョースター</option>
  <option value="jojo2">ジョセフ・ジョースター</option>
  <option value="jojo3">空条承太郎</option>
  <option value="jojo4">東方仗助</option>
  <option value="giogio5">ジョルノ・ジョバァーナ</option>
  <option value="jojo6">空条徐倫</option>
  <option value="jojo7">ジョニィ・ジョースター</option>
  <option value="jojo8">東方定助</option>
  <option value="jojo9">ジョディオ・ジョースター</option>
</select>

見た目を変えてみる

セレクトボックスの見た目は何も設定しなければブラウザ固有の見た目になるようです。

見た目をちょっと変えてみましょう。

Bootstrapのform-controlというクラスを<select>に付与します。

<select class="form-control">
  <option>・・・</option>
   ・
   ・
   ・
  <option>・・・</option>
</select>

あれ？右の矢印どこいった？

右端の矢印は擬似要素beforeかafterを使うのですが、<select>や<option>にスタイルを当てても表示されません。<select>のさらに親要素に対して指定する必要があります。

参考：SPIQA NOTE｜セレクト要素の矢印を消して独自の矢印を表示する方法

.select-wrap {
  position: relative;
}

.select-wrap:after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-top: 2px solid #ccc;
  border-left: 2px solid #ccc;
  transform: translateY(-50%) rotate(-135deg);
  font-size: 20px;
  pointer-events: none;
}

<div class="select-wrap">
  <select class="form-control">
    <option>・・・</option>
     ・
     ・
     ・
    <option>・・・</option>
  </select>
</div>

この矢印がアニメーションするとイケてるんですけどね。

まとめ

・<select>と<option>を使う

・見た目を変えるにはひと工夫いる

・ジョジョの第5部はイタリアが舞台なのでJOJOではなくGIOGIO

次回はさらにオシャレなセレクトボックスに挑戦してみます！

この記事を書いた人

みやの

Web・DTP担当

We Blog Weblog