DEV Community
·
如何修复Webkit（Safari）中的光泽下拉菜单
💡
原文英文，约600词，阅读约需3分钟。
📝
内容提要
在开发devpad项目时，作者解决了Safari浏览器中<select>元素的显示问题，采用SVG背景图像和CSS实现了颜色一致性，最终实现了支持深色和浅色模式的跨浏览器兼容下拉菜单。
🎯
关键要点
- 开发devpad项目时，作者遇到Safari浏览器中<select>元素的显示问题。
- 作者决定不使用任何UI框架，尽量依赖基本的HTML元素。
- Safari中的<select>元素显示为旧版iOS风格，与其他浏览器不同。
- 解决方案包括使用SVG背景图像，但在设置背景颜色时会遇到困难。
- 作者使用lucide.dev图标并调整SVG的颜色，但遇到颜色不变的问题。
- 通过URL编码SVG字符串，最终成功实现了深色和浅色模式的兼容下拉菜单。
- 最终产品是完美的跨浏览器<select>元素，支持深色和浅色模式。
➡️
