重新探索 HTML select 元素

了解如何全面掌控网页上 select 菜单的样式。HTML select 元素将迎来重大升级，新增 CSS 外观属性值和新的伪元素。了解如何在 select 元素的选项中提供丰富的内容，为 HTML 开启新的可能性。构建与你的设计系统相契合的 select 元素，同时完整保留默认元素的无障碍体验和稳健性。

章节

0:00 - Introduction
2:32 - Style the select button
3:47 - Customize the drop-down
5:00 - Go beyond text options
6:50 - The selectedcontent element
7:46 - Fallback for unsupported browsers
8:49 - Next steps

资源

相关视频

WWDC26

你好我是Safari工程师Tim 今天我要带你了解一种全新的方式来使用select元素让它完全可自定义同时复用语义化 HTML的强大功能作为Web开发者你可能为下拉菜单伤透脑筋要超越默认的 select元素意味着使用庞大的JavaScript库或大量div元素无障碍功能处理也会变得复杂现在只需HTML和CSS 就有了一种更简单的方式可自定义select 从Safari 27和Chrome 135开始你可以使用现有的select元素将下拉菜单无缝集成到你的网站中为了了解它的工作原理我将在一个网站上实现可自定义select 这个网站是我为客户搭建的我一直在与一位摄影师合作为他搭建作品集让他们能展示并出售摄影作品我的客户希望添加一些排序和筛选功能为此我将使用select元素对了我的客户也叫Tim 提醒一下这是带标签的 select元素的HTML标记 select元素是一个强大的工具开箱即可提供基本的无障碍功能我可以使用键盘在option元素中导航它与屏幕阅读器配合良好无需任何外部库我将用它来构建页面上的"排序方式"按钮这就是原生的 select 顺便说一下在Apple平台上它被称为下拉按钮

原生select的出色之处在于它与平台上的其他控件风格一致为用户提供熟悉的导航方式但当我将表单控件放在照片网站上时感觉有点格格不入它无法完全融入我想要的网站风格这正是可自定义select 派上用场的地方我将带你了解各个自定义步骤从而获得更符合我设计风格的select 我首先会为网站的select按钮设置样式按钮是select元素的一部分点击它可以显示select菜单然后我将使用可自定义select 为该菜单设置样式菜单用于显示各个选项最后我将向你展示如何突破经典select元素布局的限制使用超越纯文本的内容让我们回到第一个内容

我将为控件最基本的部分即按钮设置样式从头开始我看到的是原生控件但现在我可以使用新的可自定义select外观获得一组较小的样式来匹配我网站的设计风格第一步是应用—— appearance: base-select 由于我之前在body元素上设置了font-family: Gill Sans 在body元素上 body字体现在由select按钮继承与旁边的标签保持一致这已经让我向前迈进了一步更接近我网站的设计风格接下来我将调整背景、边框和内边距我很喜欢它与网站的匹配效果我想更改的最后一个细节是箭头借助可自定义select 我可以使用名为 ::picker-icon的新选择器来修改我将使用::picker-icon选择器将content属性设置为新字形并使用width属性正确设置其大小使用:open伪类我还可以为按钮设置不同的颜色当下拉菜单打开时生效我还更新了箭头使其与打开状态的文字颜色匹配这就是我的select 与网站其余部分风格一致而这只需几行CSS代码

现在我想为下拉菜单本身设置样式可自定义select让这成为可能让我来演示与::picker-icon类似下拉菜单也有可设置样式的部分菜单本身可通过select元素上的::picker(select)设置样式复选标记可通过option元素上的::checkmark设置样式现在让我们添加一些CSS 从空白状态开始我需要先退出原生菜单我可以使用新的 ::picker(select)选择器来实现并设置 appearance: base-select 现在准备就绪首先我将使用 padding和margin调整间距接下来处理下拉菜单的边框和box-shadow

完美现在我想突出显示已选中的选项让用户清楚地看到自己的选择我可以为已选中的选项设置粗体字并将其他选项显示为灰色最后一步我将更改默认的复选标记通过设置content属性以及::checkmark选择器的width属性与处理 ::picker-icon时类似能将"排序方式"菜单设计得如此出色令人惊叹而且代码量极少

我还能走多远呢借助可自定义select 我现在可以超越简单的文本选项列表我将通过下一个功能来展示示例我的客户以几个类别的摄影作品最为知名我想突出展示这些照片因此我将添加一种方式按最受欢迎的类别浏览照片我决定使用之前的样式再创建一个select元素不过我希望select中有符号让它更具视觉吸引力借助可自定义select 我可以放入任何类型的内容图片、视频、表情符号随我所好在这里我选择在每个option 元素中使用SVG和标签让用户更轻松地探索各个类别我将图片的alt文本留空因为我不希望屏幕阅读器重复读出"Flowers"标签两次由于我移除了复选标记我希望更突出地高亮显示已选中的选项我将使用checked选择器来更改颜色这样可以但我的布局并不适合我的窗口符号使下拉菜单变得很长我需要尝试其他方法借助可自定义select 比以往任何时候都更容易为select下拉菜单带来不同布局同时在下拉菜单中复用其他CSS功能的强大能力在这里我采用了网格布局 Grid-template定义行数和列数而gap定义网格单元格之间的间距这让我的下拉菜单呈现出整齐的网格形式我认为这看起来更加整洁有序我已经完成了下拉菜单但我意识到我希望将已选中选项的SVG 显示在按钮本身内我的符号已经在HTML标记中为何它们没有出现在按钮中呢我需要再做一件事才能实现这一点

Select自带一个按钮人们单击它来打开下拉菜单但该按钮只显示文本我的图片是富内容我将使用可自定义select 提供的另一个工具来解决这个问题即元素可自定义select现在允许我替换内置按钮方法是放置一个button元素作为select元素的第一个子元素由于我的按钮目前为空所以只看到箭头在HTML中将button放入 select元素之前是不允许的现在它允许我在按钮内放置自定义内容例如标签或新的元素的特别之处在于它能显示富内容即我所选中选项的内容例如"Everything"标签旁边的SVG 我想Tim一定会很喜欢这个菜单的外观和功能

但我还没有完全完成我需要检查它在不支持可自定义select的浏览器中的效果这正是渐进增强发挥作用的地方—— 在不支持该功能的浏览器中仍然可以正常使用用户会看到原生弹出菜单这是复用select元素出色之处之一而且由于它是语义化元素我仍然可以获得内置的无障碍功能

这太令人兴奋了我的select元素完美融入网站的外观和感觉我甚至添加了一个有趣的径向颜色选择器同样完全使用可自定义select构建现在我的客户拥有了一个美观可排序的照片主页我还充分利用了 Safari的支持使用Grid Lanes 来布局我的图片要了解更多请查看 "Learn CSS Grid Lanes" Brandon会向你展示这种新布局方式的工作原理这些功能即将在 Safari 27中推出如果你想立即体验可以下载Safari Technology Preview 或Safari Beta

别忘了查看webkit.org 上的演示并尝试设计一些简单样式使用可自定义select 在你自己的网站上实现务必在浏览器中测试你的select 包括不支持该技术的浏览器以及辅助工具 Webkit.org上有一篇博客文章介绍了解更多最佳实践的方法帮助你的界面为所有人服务最后发挥创意尝试以不同方式实现它最重要的是希望你玩得开心我迫不及待地想看到你在网站上使用这个功能感谢观看

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