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

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《如何修复 webkit (Safari) 中的光泽选择》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

确保您的应用在所有浏览器引擎上都能完美运行并非易事。最近，我在DevPad项目中遇到了Safari浏览器的一个棘手问题。该项目我刻意避免使用任何UI框架或库，尽可能依赖基本的HTML元素。问题就出在一个看似普通的HTML元素——<select>元素，它在Safari中表现异常。

对比一下，在基于Chromium的浏览器Arc中，相同的元素显示正常：

为什么Safari中的<select>元素会呈现这种过时的、类似于2008年早期iOS的样式？其他浏览器显示正常，这究竟是怎么回事？一番搜索和尝试后，我终于找到了解决方案，但过程颇为曲折。

Stack Overflow上一个最佳答案建议使用以下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;
  }
}

希望这篇文章能帮助遇到同样问题的开发者，节省大家的时间。

最终效果：完美的跨浏览器<select>元素，支持深色/浅色模式：

如果您对DevPad项目感兴趣，请查看我的最新博客文章

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。