🔽

<select>タグの中身をCSSだけでカスタマイズできるようになったっぽい

に公開
CSS
HTML
tech

はじめに

「セレクトボックスを自分好みの見た目にしたい」
でも「JavaScript 書くのはちょっと面倒…」💦

そんなWeb制作ビギナーさんに向けて、最近ブラウザに入り始めた <select> の新仕様を使って、HTMLとCSSだけで見た目をガラッと変える方法を紹介します🙌

1. そもそも <select> ってなに？

フォーム（入力欄）で プルダウンメニュー を作るときに使うタグです。
HTML はこんな感じ👇

<select>
  <option value="cat">Cat</option>
  <option value="dog">Dog</option>
</select>

❓ よくある悩み

  • ブラウザや OS によって見た目がバラバラ
  • CSS で矢印アイコンを変えようとしても変えられない
  • 見た目を変えようとすると JavaScript ライブラリが必要になる

2. Customizable <select> ってなに？

2024年ごろからChromeなどで試験的に入った 新しいルール です。
簡単に言うと、

CSS だけで セレクトボックスのパーツをバラバラにデザインできるようになる

という革命的なアップデートなんです ✨
これまでは不可能だった「矢印アイコンの回転」とか「選択肢の見た目カスタム」も、全部CSSでコントロールできるようになってきています。

3. まずは “Hello Custom Select”

  1. HTML を書く – いつもの <select> に、選択中の文字を表示する <selectedoption> を足します。
  2. CSS を書く – appearance: base-select; の一行で「カスタムモード」に入ります。
<form>
  <p>
    <label for="pet-select">Select pet:</label>
    <select id="pet-select">
      <button>
        <selectedcontent></selectedcontent>
      </button>

      <option value="">Please select a pet</option>
      <option value="cat">
        <span class="icon" aria-hidden="true">🐱</span
        ><span class="option-label">Cat</span>
      </option>
      <option value="dog">
        <span class="icon" aria-hidden="true">🐶</span
        ><span class="option-label">Dog</span>
      </option>
      <option value="hamster">
        <span class="icon" aria-hidden="true">🐹</span
        ><span class="option-label">Hamster</span>
      </option>
      <option value="chicken">
        <span class="icon" aria-hidden="true">🐔</span
        ><span class="option-label">Chicken</span>
      </option>
      <option value="fish">
        <span class="icon" aria-hidden="true">🐟</span
        ><span class="option-label">Fish</span>
      </option>
      <option value="snake">
        <span class="icon" aria-hidden="true">🐍</span
        ><span class="option-label">Snake</span>
      </option>
    </select>
  </p>
</form>


select,
::picker(select) {
  appearance: base-select;
}
* {
  box-sizing: border-box;
}

html {
  font-family: Arial, Helvetica, sans-serif;
}

body {
  width: 100%;
  padding: 0 10px;
  max-width: 480px;
  margin: 0 auto;
}

h2 {
  font-size: 1.2rem;
}

p {
  display: flex;
  gap: 10px;
}

label {
  width: fit-content;
  align-self: center;
}

select {
  flex: 1;
}
select {
  border: 2px solid #ddd;
  background: #eee;
  padding: 10px;
  transition: 0.4s;
}

select:hover,
select:focus {
  background: #ddd;
}
select::picker-icon {
  color: #999;
  transition: 0.4s rotate;
}
select:open::picker-icon {
  rotate: 180deg;
}
::picker(select) {
  border: none;
}
option {
  display: flex;
  justify-content: flex-start;
  gap: 20px;

  border: 2px solid #ddd;
  background: #eee;
  padding: 10px;
  transition: 0.4s;
}
option:first-of-type {
  border-radius: 8px 8px 0 0;
}

option:last-of-type {
  border-radius: 0 0 8px 8px;
}

option:not(option:last-of-type) {
  border-bottom: none;
}
option:nth-of-type(odd) {
  background: #fff;
}

option:hover,
option:focus {
  background: plum;
}
option .icon {
  font-size: 1.6rem;
  text-box: trim-both cap alphabetic;
}
selectedcontent .icon {
  display: none;
}
option:checked {
  font-weight: bold;
}
option::checkmark {
  order: 1;
  margin-left: auto;
  content: "☑️";
}
::picker(select) {
  opacity: 0;
  transition: all 0.4s allow-discrete;
}
::picker(select):popover-open {
  opacity: 1;
}
@starting-style {
  ::picker(select):popover-open {
    opacity: 0;
  }
}
::picker(select) {
  top: calc(anchor(bottom) + 1px);
  left: anchor(10%);
}

これだけで 「押すと開く → 選ぶ → 見た目が変わる」 セレクトボックスが完成します 🎉

まとめ

  • HTML + CSS だけ でセレクトボックスを好きなデザインにできる時代が来つつある
  • これまでの「JS必須」なUIが、CSSだけで作れる世界線に突入し始めてる
  • 最初はサンプルをコピーして色や枠線を変えるだけでも OK！

参考リンク

Discussion