ブランド選択のスタイル設定

ウェブ機能: カスタマイズ可能な <select>

カスタマイズ可能な select API は、CSS を使用して <select> 要素を宣言的にスタイル設定し、ブランドのデザイン システムに完全に一致させる方法を提供します。appearance: base-select を有効にすると、select 要素の内部シャドウ DOM にアクセスできるようになり、標準の CSS プロパティを使用して、ボタン、オプション選択リスト、矢印アイコン、チェックマーク インジケーターのスタイルを設定できます。

以前は、完全にブランド化された選択を実現するには、JavaScript を使用してコントロールをゼロから再構築する必要がありました。これにより、ユーザー補助、キーボード ナビゲーション、ネイティブ フォームの統合が損なわれることがよくありました。appearance: base-select を使用すると、ブラウザがフォーカス管理、最上位レイヤのレンダリング、ユーザー補助バインディングを処理する一方で、カスタムの外観を実現できます。

実装方法

ブランド選択のスタイルを実装するには:

  1. カスタマイズを有効にする: <select> 要素と ::picker(select) 疑似要素（オプションのプルダウン リストをターゲットとする）の両方に appearance: base-select を適用します。
  2. カスタムボタンを構造化する（省略可）: <select> 内に <button> 要素を直接定義して、デフォルトのトリガーを置き換えます。このボタン内の <selectedcontent> 要素を使用して、現在選択されているオプションのテキストまたはコンテンツを表します。
  3. 選択リストのスタイルを設定する: ::picker(select) 疑似要素を使用して、タイポグラフィ、背景色、枠線、シャドウをプルダウン リストに適用します。ブラウザはこれを最上位レイヤでレンダリングするため、z-index の競合は過去のものとなります。
  4. 内部アイコンのスタイルを設定する:
    • select::picker-icon を使用して、矢印アイコンのスタイルを設定するか、矢印アイコンを置き換えます。
    • option::checkmark を使用して、アクティブなオプションの横にあるチェックマーク インジケーターのスタイルを設定します。
  5. スタイル オプション: <option> 要素に、ホバー状態、パディング、レイアウトのスタイルを適用します。

コードの例: ブランド配送業者を選択

次の例は、特定の「parcel」ブランドの美観に合わせて、等幅フォントと破線の枠線でスタイル設定されたカスタム選択を示しています。

/* Enable customization for the select and its picker */
.brand-select,
.brand-select::picker(select) {
  appearance: base-select;
}

/* Style the visible trigger button */
.brand-select {
  font-family: 'Courier New', monospace;
  background-color: #fffaf0;
  color: #8b4513;
  border: 2px dashed #8b4513;
  border-radius: 4px;
  padding: 0.75rem;
  font-size: 1rem;
  cursor: pointer;
}

/* Style the dropdown options list */
.brand-select::picker(select) {
  font-family: 'Courier New', monospace;
  background-color: #fffaf0;
  border: 2px dashed #8b4513;
  border-radius: 4px;
  padding: 0.5rem;
}

/* Customize internal part colors to match text */
.brand-select::picker-icon {
  color: #8b4513;
}

.brand-select option::checkmark {
  color: #8b4513;
}

/* Style individual options and hover effects */
.brand-select option {
  padding: 0.5rem;
  border-radius: 4px;
  color: #8b4513;
  cursor: pointer;
}

.brand-select option:hover {
  background-color: #fdf5e6;
}

<label for="preferences">Select shipping preference</label>
<select class="brand-select" id="preferences" name="preferences">
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option value="standard">Standard Shipping</option>
  <option value="express" selected>Express Shipping</option>
  <option value="overnight">Overnight Delivery</option>
</select>

戦略的な実装とベスト プラクティス

  • 推奨: 標準のクロスブラウザ選択オーバーライドでは実現できない、すべてのフォーム コントロールにわたる高忠実度の視覚的な一貫性がデザイン システムで必要な場合は、appearance: base-select を使用します。
  • オペレーティング システムのネイティブ ピッカー エクスペリエンス（iOS デバイスの標準のスクロール ホイール ピッカーなど）を使用している場合は、このオプションを使用しないでください。base-select を有効にすると、ネイティブ モバイル UI コントロールが無効になり、ウェブでレンダリングされたトップレイヤー メニューが有効になります。
  • 推奨事項: 色のコントラストが WCAG 基準を満たしていることを確認します。カスタマイズ可能な選択ツールを使用すると、アドホックな色を設定できますが、カスタムの背景に対してテキストが読みやすい状態を維持する責任はユーザーにあります。
  • レイアウトの動作をテストします。appearance: base-select を設定すると、最も長いオプションの幅に基づいて選択要素のサイズを決定するデフォルトのブラウザ動作が削除されます。レイアウト シフトを防ぐために、固定幅を設定するか、flex / grid 制約を使用する必要がある場合があります。
  • <select> に name 属性と関連付けられた <label> があることを確認します。これにより、カスタム UI を使用している場合でも、コンポーネントはスクリーン リーダーにアクセス可能であり、標準のフォーム送信で正しく動作します。
  • オプションで標準の value 属性を使用して、フォームの送信が以前とまったく同じように機能するようにします。

代替戦略

カスタマイズ可能な <select> のフォールバックとブラウザ サポート

appearance: base-select をまだサポートしていないブラウザでは、<select> 要素は標準のオペレーティング システムのプルダウンに適切にフォールバックされます。

  • テキスト以外のコンテンツが無視される: 古いブラウザでは、<option> タグ内の HTML タグ（<svg> や <div> など）が削除され、テキストノードのみがレンダリングされます。<option> のテキスト コンテンツが、それ自体で読みやすく、意味のあるものになるようにします。
  • HTML 構造の処理: 標準のパーサーは、<select> 内の <button> タグと <selectedcontent> タグを無視するか、無効として扱うことがあります。標準テキストを読み取り可能なフォールバックとして表示する場合、プログレッシブ エンハンスメントに重い JavaScript ポリフィルは厳密には必要ありません。
document.addEventListener("DOMContentLoaded", () => {
  // Check if browser supports base-select value
  if (!CSS.supports("appearance", "base-select")) {
    // Custom select overrides are not supported natively.
  }
});