2019 年选择样式的现状

据我从上次整理 CSS 最受欢迎的功能 得知，表单控件的样式是人们的主要需求。我会说排名前五。对于人们想要设置样式的原生表单元素，Greg Whitworth 有一些数据 表明，<select> 元素比任何其他元素的需求都多——是下一个元素需求的两倍——而且是开发人员最常以某种方式自定义的元素。

开发人员显然想要设置选择下拉菜单的样式。

您实际上会做一些。可能比您意识到的更多。

最好的解决方法来自 Filament Group 博客上的 Scott Jehl。我将在下面嵌入一份副本，以便您轻松查看

查看 Pen
select-css by Scott/Filament Group by Chris Coyier (@chriscoyier)
on CodePen.

值得注意的是，这是一个完全跨浏览器的解决方案。它不是只限于最先进的桌面浏览器。不同浏览器和平台之间存在一些视觉差异，但总体而言它非常一致，并为您提供了一个可以进一步自定义的基础。

这只是“外部”

打开选择框。嗯，它看起来和行为与您完全没有设置样式一样。

某些浏览器确实允许您设置内部样式，但它非常有限。每次我走这条路时，我都会遇到在跨浏览器上获得兼容性方面的麻烦。

Greg 的数据 表明，只有 14%（第三名）的开发人员发现设置外部样式是选择元素中最痛苦的部分。我要借用他的图表，因为它绝对引人入胜

挫折	%	计数
无法为列表中的搜索创建良好的用户体验	27.43%	186
无法根据您的需要设置 <option> 元素的样式	17.85%	121
无法设置默认状态（下拉箭头等）的样式	14.01%	95
无法设置桌面弹出窗口的样式（例如边框、阴影等）	11.36%	77
在 <select> 控件或其 <option> 中插入超出简单文本的内容	11.21%	76
在 <option> 元素中插入任意 HTML 内容	7.82%	53
无法创建独特的未选中/占位符样式和行为	3.39%	23
能够在弹出窗口打开时从大型数据集生成新选项	3.10%	21
无法根据您的需要设置当前选定 <option> 的样式	1.77%	12
无法设置移动设备弹出窗口的样式	1.03%	7
能够让选项在滚动时自动重复（例如，如果您有 1 到 100 的选项列表，当您到达 100 时，而不是让用户滚动回顶部，让 1 显示在 100 下面）	1.03%	7

简而言之，设置选择框样式中最痛苦的部分是

• 搜索
• 设置打开下拉菜单的样式，包括各个选项，包括不仅仅是文本
• 更新元素而无需关闭它
• 设置 “没有” 选中和选中项目的情况的样式

令我惊讶的是，多选没有被选中。也许它不在 <select> 的范围内，因为它不向后兼容？

浏览器演变

Edge 最近宣布他们正在 改进 表单控件的外观，但尚未说明标准或如何自定义它们。

看起来有很好的势头。如果您想了解更多信息并随时了解所有进展（我知道我会！）

• 收听 Nicole Sullivan 谈论它（大约从 16 分钟开始）。
• 阅读 Greg Whitworth 的 “我们可以设置 <select> 控件的样式吗？！” 它深入探讨了所有这些。