如何修复 webkit (Safari) 中的光泽选择

确保您的应用在所有浏览器引擎上都能完美运行并非易事。最近，我在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,<svg class="lucide lucide-chevron-down" fill="none" height="24" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m6 9 6 6 6-6"></path></svg>') 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,<svg class="lucide lucide-chevron-down" fill="none" height="24" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m6 9 6 6 6-6"></path></svg>') 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) 中的光泽选择的详细内容，更多请关注知识资源分享宝库其它相关文章！