<select>元素现在可以使用 CSS 进行自定义 | 博客 | Chrome for Developers

主要观点:从 Chrome 135 起,开发者可统一在网页上使用可访问、标准化且可通过 CSS 样式化的<select>元素,历经多年工程和协作规范工作,成果丰富强大且在旧浏览器中不会出错。新特性包括appearance: base-select属性、可包含丰富 HTML 内容、完全可定制以及不变的 JavaScript 接口等。
关键信息:

  • appearance: base-select可将<select>元素置于新的可配置和可样式化状态,解锁多项新功能和行为,同时也失去一些功能。
  • 可在<option>中放入图像或 SVG 等丰富 HTML 内容,浏览器会根据appearance: base-select决定是否显示。
  • 资源丰富,包括 Web 标准相关链接、Chrome 相关内容及社区资源等。
    重要细节:
  • 有展示使用新特性的视频及多个 Codepen 示例,如不同的<select>呈现效果等。
  • Chrome 为可定制<select>的特性设置了 Finch 实验,以防紧急需要关闭。
  • 各种浏览器参与了规范,这只是开始,后续会继续添加相关指导、示例和资源。
阅读 9
0 条评论