HTMLのselect要素の新たな可能性

Web上で選択メニューのスタイルを自在にコントロールする方法を学びましょう。HTMLのselect要素は、CSSのappearanceの新しい値、および新しい擬似要素によって大幅にアップグレードされます。HTMLの新機能によって、selectのオプションにリッチコンテンツを含める新たな可能性がもたらされます。標準要素のアクセシビリティと堅牢性を維持しながら、デザインシステムに合わせたselect要素を作成する方法を確認します。

リソース

関連ビデオ

WWDC26

こんにちは SafariエンジニアのTimです。今日は、select要素をまったく新しい方法で完全にカスタマイズ可能にしながらセマンティックHTMLの利点も活かす方法を紹介します。 Webデベロッパならドロップダウンに悩んだことがあるはずです。デフォルトのselect要素以上のことをするためには重いJavaScriptライブラリを使うか大量のdiv要素が必要でした。アクセシビリティの対応も難しい問題でした。 HTMLとCSSだけで実現できるよりシンプルな方法があります。 Customizable selectです。 Safari 27とChrome 135以降、既存のselect要素を使ってドロップダウンをWebサイトにシームレスに組み込めます。仕組みを見るために customizable selectを実装してみます。クライアントのために制作中のWebサイトへの導入です。写真家のポートフォリオサイトを一緒に制作しています。写真を展示・販売できるサイトです。クライアントはいくつかの並び替えとフィルタ機能を select要素を使って実装したいと考えています。ちなみに、クライアントの名前も Timといいます。改めて確認すると、これがラベル付き select要素のHTMLマークアップです。 select要素は強力なツールで基本的なアクセシビリティが最初から備わっています。キーボードでoption要素をナビゲートできスクリーンリーダーとも外部ライブラリなしで連携できます。これを使って、ページにボタンを作成します。これがネイティブのselectです。ちなみに Appleのプラットフォームでは「プルダウンボタン」と呼ばれます。

ネイティブselectの優れた点はプラットフォーム上の他のコントロールと統一されておりユーザーが使い慣れた操作感で利用できることです。しかし、フォームコントロールをフォトサイトに配置すると少し浮いた印象になります。サイトのデザインにうまく溶け込んでいません。そこでcustomizable selectの出番です。カスタマイズのさまざまなステップをご紹介します。デザインに合った selectを作っていきます。まず、サイト上の selectボタンのスタイルを整えます。ボタンはselect要素の部分でクリックするとselectメニューが表示されます。次に、customizable selectでそのメニューをスタイリングします。オプションが表示される部分です。最後に、従来のselect要素のレイアウトから脱却する方法を紹介します。テキスト以外のコンテンツを使った表現です。最初の項目に戻りましょう。

コントロールの最も基本的な部分、ボタンのスタイルを設定します。ゼロから始めるとネイティブコントロールが表示されます。新しいcustomizable selectの appearanceを使うとより少ないスタイルセットでサイトのデザインに合わせた変更が可能です。最初のステップは `appearance: base-select`を適用します。以前、bodyに `font-family: Gill Sans`を設定していたので bodyのフォントが selectボタンに継承され隣のラベルと揃います。これだけでもサイトのデザインに一歩近づきました。着実に近づいています。次のステップとして、背景・ボーダー・パディングを調整します。サイトによく馴染んでいます。最後にもう一つ、矢印を変更したいと思います。 Customizable selectでは `::picker-icon`という新しいセレクタで変更できます。 `::picker-icon`セレクタを使って contentプロパティに新しいグリフを設定し widthでサイズを正しく指定します。 `:open`擬似クラスを使うとドロップダウンメニューが開いた状態でボタンの色を別の色に設定することもできます。 open状態のテキスト色に合わせて矢印も更新しました。サイトの他の部分に馴染んだselectができました。たった数行のCSSで実現できました。

今度はドロップダウン自体をスタイリングします。customizable selectで可能です方法をご紹介します。 `::picker-icon`と同様に、ドロップダウンメニューにもスタイル可能な部分があります。メニュー自体はselect要素の `::picker(select)`でスタイリングできチェックマークはoption要素の `::checkmark`で変更できます。 CSSを追加しましょう。クリーンな状態から始めるためまずネイティブメニューを無効にする必要があります。新しい`::picker(select)` セレクタを使って `appearance: base-select`を設定します。これで準備完了です。まず、パディングとマージンで間隔を整えます。ドロップダウンのボーダーと box-shadowを設定します。

完璧です次に、選択中のオプションを強調表示してユーザーが何を選んだか明確にします。チェック済みのオプションに太字フォントを設定し他のオプションはグレーアウトします。最後のステップとしてデフォルトのチェックマークを変更します。 content CSSプロパティを設定し `::checkmark`セレクタに widthを指定します。 `::picker-icon`で行ったのと同様の方法です。わずかなコードでメニューをここまでスタイリングできました。

さらに何ができるでしょうか。 Customizable selectではテキストで表示するオプションのシンプルなリストを超えることができます。次の機能で例を見てみましょう。クライアントはいくつかのカテゴリの写真で知られておりその写真を目立たせたいと考えています。そこで、人気カテゴリ別に写真を閲覧できる機能を追加します。先ほどのスタイリングを使ってもう一つselect要素を作成します。ただし、より視覚的に魅力的なシンボル付きにしたいです。 Customizable selectではあらゆる種類のコンテンツを使えます。画像、動画、絵文字など何でも組み込めます。今回は各option要素の内側に SVGとラベルを配置してユーザーがカテゴリをより直感的に探せるようにします。画像のalt属性は空にしました。スクリーンリーダーで「Flowers」が 2度読み上げられないようにするためです。チェックマークを削除したので選択中のオプションをより目立つ形で強調します。 `checked`セレクタを使って色を変更します。これで動作しますが、レイアウトがウィンドウに収まりきりません。シンボルのせいでドロップダウンが縦長になっています。別の方法を試す必要があります。 Customizable selectでは selectのドロップダウンにさまざまなレイアウトを他のCSS機能を活用しながらこれまで以上に簡単に導入できます。ここではグリッドレイアウトを採用しました。 `grid-template`で行数と列数を定義し `gap`でグリッドセル間の間隔を指定します。これでドロップダウンがきれいなグリッドになります。より整理された見た目になりました。ドロップダウンは完成しましたが選択中のオプションのSVGをボタン自体に表示させたくなりました。シンボルはすでに HTMLマークアップにあります。なぜボタンに表示されないのでしょうか。これを実現するにはもう一つ作業が必要です。

selectにはボタンがあります。ユーザーがクリックしてドロップダウンを開く部分です。しかしそのボタンにはテキストしか表示されません。画像はリッチコンテンツです。 Customizable selectが提供するもう一つのツールを使ってこの問題を解決します。 ``要素です。 Customizable selectでは組み込みボタンを置き換えられます。 button要素を select要素の最初の子として配置するだけです。現時点ではボタンが空なので矢印だけが表示されます。 select要素内にbuttonを入れることは以前はHTMLで許可されていませんでしたが今では、ボタン内にカスタムコンテンツを配置できます。ラベルや新しい`` 要素なども使えます。 ``の特徴は選択中のオプションのリッチコンテンツを表示できることです。「Everything」ラベルの隣にある SVGのように表示されます。このメニューの見た目と動作を Timはきっと気に入るでしょう。

ただ、まだ完成ではありません。 Customizable selectに対応していないブラウザでの表示を確認する必要があります。ここでプログレッシブエンハンスメントが役立ちます。この機能に対応していないブラウザでも利用できます。ユーザーにはネイティブのポップアップが表示されます。これがselect要素を再利用するメリットの一つです。セマンティック要素であるため組み込みのアクセシビリティ機能もそのまま使えます。

素晴らしい結果です select要素がサイトの見た目に自然に馴染みました。楽しい放射状カラーピッカーも追加しました。こちらもcustomizable selectだけで作られています。クライアントの写真を美しく整理して表示できるようになりました。 SafariのGrid Lanesサポートも活用して画像のレイアウトを整えました。詳しくは「Learn CSS Grid Lanes」をご覧ください。 Brandonがこの新しいレイアウト手法を解説しています。これらの機能はSafari 27で利用可能になります。今すぐ試したい場合は Safari Technology PreviewまたはSafari Betaをダウンロードしてください。

webkit.orgのデモもぜひお試しください。シンプルなものからでいいので自分のWebサイトでcustomizable selectを試してみてください。この技術に対応していないブラウザや支援技術でのselectの動作確認も忘れずに。 webkit.orgのブログ記事ではベストプラクティスについて誰もが使えるインターフェースを作るための方法を詳しく解説しています。創造性を発揮してさまざまな実装方法を試してみてください。何より、楽しんでいただければ幸いです皆さんがこの機能を Webサイトで活用する姿を楽しみにしています。ご視聴ありがとうございました

1:11 - Basic markup

<label for="sort-select">Sort by</label>
<select id="sort-select">
    <option>Newest</option>
    <option>Oldest</option>
</select>

2:37 - Native form control
```
select {
 
}
```

2:50 - appearance: base-select

body {
    font-family: Gill Sans, sans-serif;
}

select {
    appearance: base-select;
}

3:07 - Style the select button

select {
    appearance: base-select;
    background-color: var(--green-10);
    border: none;
    padding: 0.6em 1em;
}

3:08 - Picker icon

select:open {
    background-color: var(--green-100);
    color: white;
}

3:29 - Picker icon open state

select:open {
    background-color: var(--green-100);
    color: white;
}

select:open::picker-icon {
    content: url(icons/arrow-white.svg);
}

4:08 - Picker select
```
::picker(select) {

}
```

4:21 - Picker select spacing

::picker(select) {
    appearance: base-select;
    padding: 4px;
    margin-top: 0.5em;
}

4:28 - Picker select border and shadow

::picker(select) {
    appearance: base-select;
    padding: 4px;
    margin-top: 0.5em;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 9px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

4:36 - Custom option styles

option:checked {
    font-weight: 600;
}

option:not(:checked) {
    color: #777;
}

4:42 - Picker option checkmark

option::checkmark {
    content: url(checkmark.svg);
    width: 0.65em;
}

5:31 - Images in option

<option value="flower">
    <img src="flowers.svg" alt="">
    <span class="text">Flowers</span>
</option>

5:52 - Custom option highlight

option::checkmark {
    display: none;
}

option:checked {
    background: #00857e;
    color: white;
}

6:20 - Grid layout in drop downs

::picker(select) {
    display: grid;
    grid-template: 
       1fr 1fr / 1fr 1fr 1fr;
    gap: 1rem;
}

6:43 - Select with image options

<select>
    <option value="anywhere">
        <img src="icons/all.svg" alt="">
        <span class="text">Everything</span>
    </option>
    <option value="buildings">
        <img src="icons/buildings.svg" alt="">
        <span class="text">Buildings</span>
    </option>
    <option value="flowers">
        <img src="icons/flower.svg" alt="">
        <span class="text">Flowers</span>
    </option>
    
</select>

7:11 - Select menu

<select>
    
    
    
    <option>    </option>
    <option>    </option>
    <option>    </option>
</select>

7:13 - Select menu button

<select>
    <button>
    
    </button>
    <option>    </option>
    <option>    </option>
    <option>    </option>
</select>

7:29 - SelectedContent Element

<select>
    <button>
        <selectedcontent></selectedcontent>
    </button>
    <option>     </option>
    <option>     </option>
    <option>     </option>
</select>

0:00 - Introduction
Introducing Customizable Select, a way to fully style the HTML Select Element in CSS while keeping its built-in accessibility, available in Safari 27 and Chrome 135. Follow along as a "Sort by" menu and a category picker are built to fit right into a photographer's portfolio site.
2:32 - Style the select button
Apply `appearance: base-select` to opt into the new styling model, then customize the button with familiar CSS — fonts, background, border, and padding. Use the new `::picker-icon` pseudo-element to swap the dropdown arrow, and the `:open` pseudo-class to change colors when the menu is showing.
3:47 - Customize the drop-down
Style the menu itself by applying `appearance: base-select` to the `::picker(select)` pseudo-element. Adjust spacing, borders, and box-shadow, emphasize the active option with the `:checked` pseudo-class, and replace the default checkmark using `::checkmark`.
5:00 - Go beyond text options
Place rich content like SVG icons, images, or labels directly inside
6:50 - The selectedcontent element
Replace the built-in select button by placing a
8:49 - Next steps
Try the demo on webkit.org, experiment with customizable select in your own projects, and test against assistive tools and non-supporting browsers. To see the Grid Lanes layout used to display the photos, watch "Learn CSS Grid Lanes."

「今すぐ始める」を詳しく見る

最新情報

プラットフォームを詳しく見る

特集

テクノロジーを詳しく見る

特集

コミュニティを詳しく見る

特集

ドキュメントを詳しく見る

リリースノート

ダウンロードを詳しく見る

特集

サポートを詳しく見る

特集

クイックリンク

HTMLのselect要素の新たな可能性

関連する章

リソース

関連ビデオ

WWDC26