申し訳ございません。
このサイトはお使いのブラウザに対応しておりません。
別のブラウザをご利用ください。

Microsoft Edgeで開く

blog

home blog セレクトボックスに疑似要素は作成できないが矢印を変えたい

セレクトボックスに疑似要素は作成できないが矢印を変えたい

疑似要素はとても便利ですが、セレクトボックスには使えません。

私は最初、そんなことを知らなかったのでずいぶん悩まされたことがありました。

また同じことで躓かないためにも、ここに書き留めておこうと思います。

目次

  1. デフォルトのセレクトボックス
  2. デフォルトの矢印アイコンを消去する
  3. 好みのアイコンを設定する
  4. まとめ

デフォルトのセレクトボックス

<select class="selectbox" name="bloodtype">
  <option value="">選択してください</option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="O">O</option>
  <option value="AB">AB</option>
</select>

デフォルトの矢印アイコンを消去する

.selectbox {
  appearance: none;
}

/* IE用 */
.selectbox::-ms-expand {
  display: none;
}

好みのアイコンを設定する

<div class="container">
  <select class="selectbox" name="bloodtype">
    <option value="">選択してください</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="O">O</option>
    <option value="AB">AB</option>
  </select>
</div>
.selectbox {
  width: 100%;
  appearance: none;
}

/* IE用 */
.selectbox::-ms-expand {
  display: none;
}

.container {
  width: 200px;
  position: relative;
}

.container::after {
  content: "▼";
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
}

セレクトボックスに疑似要素はつけれないので、セレクトボックスを<div></div>で囲い、そちらに疑似要素を作成しています。

まとめ

いかがでしたか？

親要素に付与する疑似要素のアイコンを変えれば、いろんなタイプのセレクトボックスが作れると思います。

ぜひチャレンジしてみてください。

最後までご覧いただきありがとうございました。