# カスタムセレクトボックスのCSS実装

> appearance: noneで標準の見た目を外し、矢印を自作したセレクトボックス。ブラウザ間の見た目の差をなくしつつ、キーボード操作は標準のままです。

- カテゴリ: フォーム
- URL: https://www.css-dictionary.com/recipes/custom-select/

## HTML

```html
<label class="field-label" for="pref">お住まいの都道府県</label>
<div class="select-wrap">
  <select id="pref">
    <option>東京都</option>
    <option>京都府</option>
    <option>石川県</option>
    <option>長崎県</option>
  </select>
</div>
```

## CSS

```css
.field-label {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 600;
}

.select-wrap {
  position: relative;
  width: 220px;
}

.select-wrap select {
  width: 100%;
  appearance: none; /* 標準の矢印・枠を外す */
  padding: 10px 36px 10px 12px;
  border: 1px solid #cbbfa5;
  border-radius: 6px;
  background: #fff;
  font: inherit;
  font-size: 14px;
  color: #1a1712;
  cursor: pointer;
}

.select-wrap select:focus-visible {
  outline: 2px solid #b0413e;
  outline-offset: -1px;
}

/* 矢印はラッパー側に描く（selectは疑似要素が使えない） */
.select-wrap::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 10px;
  height: 6px;
  transform: translateY(-50%);
  background: #8a6d3b;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  pointer-events: none; /* 矢印がクリックを妨げないように */
}
```

## 仕組みの解説

select要素は ::after などの疑似要素が使えないため、ラッパーdivを1枚かぶせてそちらに矢印を描きます。矢印には pointer-events: none を指定し、クリックが下のselectへ素通りするようにします。appearance: none で消えるのは「閉じた状態」の見た目だけで、開いたドロップダウンの中身はOS標準のまま（装飾不可）という割り切りも覚えておくと迷いません。

## 実装のポイント

ドロップダウンの中身までデザインしたい場合は、カスタマイズ可能セレクト（appearance: base-select、実験的）かJSコンポーネントの領域になります。

## AIに依頼するときの文例

カスタムデザインのセレクトボックスを作ってください。appearance: noneで標準の見た目を外し、ラッパー要素の::after + clip-pathで矢印を自作、pointer-events: noneでクリックを妨げないようにしてください。

## 使っているプロパティ

- [appearance](https://www.css-dictionary.com/property/appearance.md)
- [position](https://www.css-dictionary.com/property/position.md)
- [border-radius](https://www.css-dictionary.com/property/border-radius.md)
- [pointer-events](https://www.css-dictionary.com/property/pointer-events.md)