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>元素，支持深色和浅色模式。
❓
延伸问答
如何解决Safari中<select>元素的显示问题？
可以通过使用SVG背景图像和CSS来解决Safari中<select>元素的显示问题，确保颜色在深色和浅色模式下保持一致。
为什么Safari中的<select>元素看起来与其他浏览器不同？
Safari中的<select>元素显示为旧版iOS风格，与其他浏览器的外观不同。
在开发中如何实现跨浏览器兼容的下拉菜单？
通过不使用UI框架，依赖基本HTML元素，并结合SVG和CSS，可以实现跨浏览器兼容的下拉菜单。
使用SVG背景图像时遇到的主要问题是什么？
主要问题是设置背景颜色时，SVG的颜色无法通过CSS变量进行更改。
如何在深色模式下调整SVG图标的颜色？
可以通过URL编码SVG字符串来调整深色模式下的SVG图标颜色，从而确保颜色正确显示。
最终的解决方案是什么？
最终的解决方案是使用URL编码的SVG字符串，成功实现了支持深色和浅色模式的跨浏览器兼容下拉菜单。
➡️
