确保您的应用在所有浏览器引擎上都能完美运行并非易事。最近，我在devpad项目中遇到了safari浏览器的一个棘手问题。该项目我刻意避免使用任何ui框架或库，尽可能依赖基本的html元素。问题就出在一个看似普通的html元素——元素，它在safari中表现异常。
对比一下，在基于Chromium的浏览器Arc中，相同的元素显示正常：
为什么Safari中的元素会呈现这种过时的、类似于2008年早期iOS的样式？其他浏览器显示正常，这究竟是怎么回事？一番搜索和尝试后，我终于找到了解决方案，但过程颇为曲折。
Stack Overflow上一个最佳答案建议使用以下CSS代码：
select { -webkit-appearance: none;}
登录后复制
但这会移除下拉箭头图标，影响用户体验，并非理想方案。
另一个答案提示使用SVG作为背景图片，但如果元素本身已经设置了背景颜色，则操作起来较为复杂。
我使用了Lucide.dev图标库，复制SVG代码并尝试应用，需要修改的是SVG的描边颜色。然而，我发现更改配色方案无法改变SVG颜色，而且CSS变量不能直接用于background-image属性。于是我尝试使用@media语句：
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url('data:image/svg+xml;utf8,') no-repeat; background-size: 18px; background-position: calc(100% - 3px) 50%; background-repeat: no-repeat; background-color: var(--input-background); padding-right: 24px;}@media (prefers-color-scheme: dark) { select { background-image: url('data:image/svg+xml;utf8,') no-repeat !important; }}
登录后复制
我以为这样就能解决问题，但切换到深色模式后，箭头仍然是黑色。检查元素显示样式已应用，但出现“无效属性值”错误，尽管字符串本身没有问题（颜色错误除外）。唯一的区别是stroke=”white”代替了stroke=”black”。
这时，ChatGPT派上了用场。它巧妙地解决了这个问题：对SVG字符串进行URL编码。最终的（可运行的）CSS代码如下：
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M6%209%2012%2015%2018%209%22/%3E%3C/svg%3E') no-repeat; background-size: 18px; background-position: calc(100% - 3px) 50%; background-repeat: no-repeat; background-color: var(--input-background); padding-right: 24px;}@media (prefers-color-scheme: dark) { select { background-image: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22white%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M6%209%2012%2015%2018%209%22/%3E%3C/svg%3E') !important; }}
登录后复制
希望这篇文章能帮助遇到同样问题的开发者，节省大家的时间。
最终效果：完美的跨浏览器元素，支持深色/浅色模式：
如果您对DevPad项目感兴趣，请查看我的最新博客文章
以上就是如何修复 webkit (Safari) 中的光泽选择的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2845301.html
