selectのデザインをリストまでCSSで整える｜base-selectの使い方

/* ===== 土台：すべてのブラウザ ===== */

/* 閉じた状態の箱。矢印は背景画像で描き、右側にそのぶんの余白を空ける */
.select {
  appearance: none;
  display: block;
  width: 100%;
  max-width: 500px;
  height: 75px;
  padding: 0 72px 0 28px;
  border: 1.5px solid #d8d1fa;
  border-radius: 14px;
  background:
    url("arrow.svg") right 18px center / 36px no-repeat,
    linear-gradient(180deg, #fff, #f5f2ff);
  box-shadow: 0 6px 18px rgba(108, 92, 231, 0.14);
  color: #2a2640;
  font: inherit;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* スマホでは、箱と矢印をひと回り小さくする */
@media (max-width: 767px) {
  .select {
    height: 55px;
    padding: 0 56px 0 20px;
    background-position: right 14px center, 0 0;
    background-size: 28px, auto;
    font-size: 16px;
  }
}

.select:hover {
  border-color: #b9adf8;
  box-shadow: 0 8px 24px rgba(108, 92, 231, 0.2);
}

/* キーボード操作中は、枠とリングで強調する */
.select:focus-visible {
  border-color: #7b6cf6;
  box-shadow: 0 0 0 4px rgba(123, 108, 246, 0.18);
  outline: none;
}

/* ===== 対応ブラウザだけ ===== */
@supports (appearance: base-select) {
  /* 閉じた状態と開いたリストの両方を、CSSで装飾できるようにする */
  .select,
  .select::picker(select) {
    appearance: base-select;
  }

  /* 矢印は ::picker-icon で描き直すので、背景から外し、右の余白も戻す */
  .select {
    display: flex;
    align-items: center;
    padding-right: 0;
    background: linear-gradient(180deg, #fff, #f5f2ff);
  }

  /* リストが開いている間も、枠とリングで強調する */
  .select:open {
    border-color: #7b6cf6;
    box-shadow: 0 0 0 4px rgba(123, 108, 246, 0.18);
  }

  /* 選択中の文字。長いときは、矢印の手前で「…」にする */
  .select > button {
    all: unset;
    display: block;
    flex: 1;
    min-width: 0;
    margin-right: 12px;
  }

  .select selectedcontent {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 右端の矢印。開いている間は180度回転させる */
  .select::picker-icon {
    content: "";
    /* Safariで左にずれないよう、ブラウザ標準の余白を消す */
    padding: 0;
    /* 丸の大きさと位置 */
    width: 36px;
    height: 36px;
    margin: 0 18px 0 auto;
    background: url("arrow.svg") center / contain no-repeat;
    transition: rotate 0.25s cubic-bezier(0.3, 0.7, 0.4, 1);
  }

  .select:open::picker-icon {
    rotate: 180deg;
  }

  /* スマホでは、矢印もひと回り小さくする */
  @media (max-width: 767px) {
    .select::picker-icon {
      width: 28px;
      height: 28px;
      margin-right: 14px;
    }
  }

  /* 開いたリストの箱。閉じているときは透明で、少し上にある */
  .select::picker(select) {
    margin-top: 10px;
    padding: 8px;
    border: 1px solid #e2ddfa;
    border-radius: 18px;
    background: #fff;
    box-shadow:
      0 20px 44px rgba(108, 92, 231, 0.18),
      0 2px 6px rgba(108, 92, 231, 0.08);
    opacity: 0;
    translate: 0 -8px;
    scale: 0.98;
    transform-origin: top center;
    transition:
      opacity 0.2s,
      translate 0.2s cubic-bezier(0.3, 0.7, 0.4, 1),
      scale 0.2s cubic-bezier(0.3, 0.7, 0.4, 1),
      display 0.2s allow-discrete,
      overlay 0.2s allow-discrete;
  }

  /* 開いているときの状態 */
  .select:open::picker(select) {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }

  /* 開いた瞬間の状態。ここから上の状態へアニメーションする */
  @starting-style {
    .select:open::picker(select) {
      opacity: 0;
      translate: 0 -8px;
      scale: 0.98;
    }
  }

  /* リストの各項目 */
  .select option {
    padding: 14px 20px;
    border-radius: 12px;
    color: #2a2640;
    font-weight: 500;
    transition: background-color 0.15s;
  }

  .select option:hover,
  .select option:focus-visible {
    background: #f6f4ff;
    outline: none;
  }

  /* 選択中の項目 */
  .select option:checked {
    background: #ece8ff;
    color: #5a4bd6;
    font-weight: 700;
  }

  /* 選択中の項目の右端に付くチェックマーク */
  .select option::checkmark {
    content: "";
    order: 1;
    flex: none;
    width: 24px;
    height: 24px;
    margin-left: auto;
    border-radius: 50%;
    background: url("check.svg") center / 70% no-repeat, #7b6cf6;
  }
}

@supports (appearance: base-select) {
  /* リストの高さを制限して、中でスクロールさせる */
  .select-pref::picker(select) {
    max-height: 360px;
    overflow-y: auto;
  }

  /* Safariが標準で付ける区切り線を消す */
  .select-pref optgroup {
    padding: 0;
    border: 0;
  }

  /* 地方名の見出し。背景に、文字の上下中央を通る横線を描く */
  .select-pref legend {
    /* Safariでは文字の幅に縮むので、リストの幅いっぱいに広げる */
    box-sizing: border-box;
    width: 100%;
    padding: 20px 20px 8px;
    background: linear-gradient(#e4e0f5, #e4e0f5) center / 100% 1px no-repeat;
    background-origin: content-box;
    background-clip: content-box;
    color: #8a84a8;
    font-size: 14px;
    font-weight: 700;
  }

  /* 文字に白い背景を付けて、文字の部分だけ線を隠す */
  .select-pref legend span {
    padding-right: 12px;
    background: #fff;
  }

  @media (max-width: 767px) {
    .select-pref legend {
      font-size: 13px;
    }
  }

  /* 選べない項目 */
  .select-pref option:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }
}

@supports (appearance: base-select) {
  /* 各項目と、閉じた状態の中身を、色見本と文字の横並びにする */
  .select-color option,
  .select-color selectedcontent {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  /* 色見本 */
  .select-color .swatch {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  }

  /* 在庫表示。チェックマークの手前で右寄せにする */
  .select-color .note {
    margin-left: auto;
    color: #8a84a8;
    font-size: 14px;
    font-weight: 500;
  }

  .select-color .note.is-low {
    color: #c0623f;
  }

  .select-color option::checkmark {
    margin-left: 12px;
  }

  /* 閉じた状態では、在庫表示を隠す */
  .select-color selectedcontent .note {
    display: none;
  }

  /* 選べない項目 */
  .select-color option:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }
}

/* 土台：ヘッダーに収まる小さなサイズにする */
.select-lang {
  width: 150px;
  max-width: none;
  height: 44px;
  padding: 0 44px 0 16px;
  border-radius: 999px;
  background-position: right 10px center, 0 0;
  background-size: 24px, auto;
  font-size: 15px;
}

@supports (appearance: base-select) {
  .select-lang {
    /* 略称の文字幅で横幅が変わらないよう、幅を固定する */
    width: 120px;
    padding: 0;
    background: linear-gradient(180deg, #fff, #f5f2ff);
  }

  /* 閉じた状態：地球のアイコンと、言語の略称だけを表示する */
  .select-lang > button {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 8px 0 0;
    padding-left: 14px;
  }

  .select-lang > button::before {
    content: "";
    flex: none;
    width: 20px;
    height: 20px;
    background: url("globe.svg") center / contain no-repeat;
  }

  .select-lang selectedcontent .name {
    display: none;
  }

  .select-lang selectedcontent .code {
    color: #2a2640;
    font-size: 15px;
    font-weight: 700;
  }

  .select-lang::picker-icon {
    width: 24px;
    height: 24px;
    margin-right: 10px;
  }

  /* 開いたリスト：言語名と略称を並べる */
  .select-lang::picker(select) {
    min-width: 220px;
    /* selectの右端に合わせて、左へ広げる */
    position-area: block-end span-inline-start;
    /* 下に余白がないときは、上向きに開く */
    position-try-fallbacks: flip-block;
  }

  .select-lang option {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
  }

  .select-lang option .code {
    margin-left: auto;
    color: #8a84a8;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
  }

  .select-lang option::checkmark {
    margin-left: 12px;
  }
}