自作セレクトをやめる日 — Safari 27のbase-selectでアクセシブルな装飾セレクトを作る

<!-- 自作セレクトの典型: ここから再実装地獄が始まる -->
<div class="custom-select" role="listbox" tabindex="0">
  <div class="custom-select__current">プランを選択</div>
  <ul class="custom-select__list">
    <li role="option" aria-selected="false">個人プラン</li>
    <li role="option" aria-selected="false">チームプラン</li>
    <li role="option" aria-selected="false">法人プラン</li>
  </ul>
</div>

/* 最小構成: ネイティブのまま、見た目だけ取り替える */
.plan-select {
  appearance: base-select;
  font: inherit;
  border: 1px solid #3b5ba9;
  border-radius: 8px;
  padding: 8px 12px;
  background: #fff;
  color: #17202b;
}

/* 選択中の表示部分 */
.plan-select > button > selectedcontent {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ドロップダウン（ポップアップ）全体 */
.plan-select::picker(select) {
  border: 1px solid #3b5ba9;
  border-radius: 8px;
  padding: 4px;
  margin-top: 4px;
}

/* 選択肢とホバー・選択状態 */
.plan-select option {
  padding: 8px 12px;
  border-radius: 6px;
}
.plan-select option:hover,
.plan-select option:focus-visible {
  background: #f0f3f5;
}
.plan-select option:checked {
  background: #e4eaf4;
  font-weight: 700;
}

<!-- selectedcontent が「選ばれている中身」をそのまま映す -->
<label for="plan">プランを選択</label>
<select id="plan" class="plan-select">
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option value="" selected>プランを選択</option>
  <option value="personal">個人プラン</option>
  <option value="team">チームプラン</option>
  <option value="corp">法人プラン</option>
</select>

<div id="bs1-wrap" style="font-family:sans-serif;max-width:420px;">
  <p id="bs1-status" style="font-size:13px;padding:8px 12px;border-radius:6px;background:#f0f3f5;">判定中…</p>
  <label for="bs1-plan" style="display:block;font-size:14px;font-weight:700;margin:12px 0 6px;">プランを選択</label>
  <select id="bs1-plan" class="bs1-select">
    <button><selectedcontent></selectedcontent></button>
    <option value="" selected>プランを選択</option>
    <option value="personal">個人プラン — 月額500円</option>
    <option value="team">チームプラン — 月額2,000円</option>
    <option value="corp">法人プラン — 個別見積</option>
  </select>
  <p style="font-size:13px;">選択中: <output id="bs1-out">（未選択）</output></p>
</div>
<style>
  .bs1-select {
    font: inherit;
    border: 2px solid #3b5ba9;
    border-radius: 8px;
    padding: 8px 12px;
    background: #fff;
    color: #17202b;
    max-width: 100%;
  }
  @supports (appearance: base-select) {
    .bs1-select { appearance: base-select; }
    .bs1-select::picker(select) {
      border: 2px solid #3b5ba9;
      border-radius: 8px;
      padding: 4px;
    }
    .bs1-select option:checked {
      background: #e4eaf4;
      font-weight: 700;
    }
  }
</style>
<script>
  (() => {
    const ok = CSS.supports('appearance', 'base-select');
    const st = document.getElementById('bs1-status');
    st.textContent = ok
      ? 'このブラウザは base-select に対応：装飾版で表示中'
      : 'このブラウザは base-select 未対応：素朴な表示が正解';
    st.style.background = ok ? '#e4eaf4' : '#fdf0e6';
    const sel = document.getElementById('bs1-plan');
    const out = document.getElementById('bs1-out');
    sel.addEventListener('change', () => {
      const opt = sel.options[sel.selectedIndex];
      out.textContent = sel.value ? opt.text + ' [' + sel.value + ']' : '（未選択）';
    });
  })();
</script>

/* 基本: どのブラウザでも壊れない素朴な見た目 */
.plan-select {
  font: inherit;
  border: 1px solid #3b5ba9;
  border-radius: 8px;
  padding: 8px 12px;
  background: #fff;
  color: #17202b;
}

/* 対応ブラウザだけ装飾モードに切り替え */
@supports (appearance: base-select) {
  .plan-select {
    appearance: base-select;
  }
  .plan-select::picker(select) {
    border: 1px solid #3b5ba9;
    border-radius: 8px;
    padding: 4px;
    margin-top: 4px;
  }
  .plan-select option:checked {
    background: #e4eaf4;
    font-weight: 700;
  }
}