セレクトボックスとは

クリックすると選択肢の一覧が開き、その中から 1 つを選ぶネイティブの入力部品。

概要

クリック（タップ）すると選択肢の一覧が開き、その中から 1 つを選ぶ入力部品です。HTML の <select> 要素はブラウザが選択肢の開閉を自動で処理してくれるため、JavaScript を書かなくても動きます。見た目は appearance: none で標準の矢印を消し、CSS の背景画像やアイコンで独自の矢印を描き直すことで、他の入力欄とデザインを揃えられます。

別名

表記ゆれ：プルダウン、ドロップダウンリスト、select、セレクトボックス

「プルダウン」は「引き下ろす」という操作から来た呼び方で、日常会話では「ドロップダウンメニュー」と混同されがちです。

AI への伝え方

「都道府県を選べるセレクトボックスを作って」のように伝えます。開いた状態の一覧はブラウザ標準の見た目になり、CSS で細かく装飾できないため、選択肢の見た目まで凝りたい場合はカスタムのドロップダウンで作る必要がある旨を確認すると認識がずれません。

似たパーツとの違い

「ドロップダウンメニュー」はリンクの一覧を開く部品で、セレクトボックスは値を選ぶ入力欄という違いがあります。「ラジオボタン」も 1 つだけ選ぶ部品ですが、選択肢を折りたたまず全部表示する点がセレクトボックスと異なります。

デモ

都道府県

コード

HTML

<div class="select-box-demo">
  <label class="select-box-demo__label" for="select-box-demo-pref">都道府県</label>
  <div class="select-box-demo__wrap">
    <select class="select-box-demo__select" id="select-box-demo-pref">
      <option value="">選択してください</option>
      <option value="tokyo">東京都</option>
      <option value="osaka">大阪府</option>
      <option value="fukuoka">福岡県</option>
    </select>
    <svg class="select-box-demo__arrow" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true">
      <polyline points="4 6 8 10 12 6" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
    </svg>
  </div>
</div>

CSS

.select-box-demo {
  font-family: sans-serif;
  max-width: 260px;
}

.select-box-demo__label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: #333;
}

.select-box-demo__wrap {
  position: relative;
}

.select-box-demo__select {
  appearance: none;
  width: 100%;
  padding: 10px 36px 10px 12px;
  border: 1px solid #b3b3b3;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  color: #333;
  cursor: pointer;
}

.select-box-demo__select:hover {
  border-color: #666;
}

.select-box-demo__select:focus-visible {
  outline: 2px solid #0017c1;
  outline-offset: 2px;
}

.select-box-demo__arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}