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

跨浏览器兼容性问题：在 Safari 中设置 HTML <select> 元素的样式

在不同的浏览器引擎之间保持一致的应用程序行为可能具有挑战性。 最近，在开发 devpad（我在这个项目中故意避免使用 UI 框架并严重依赖基本 HTML 元素）时，我遇到了 Safari 中 <select> 元素的特殊问题。

最初，使用 Arc（基于 Chromium 的浏览器）进行的开发进展顺利。 然而，在 Safari 中进行测试却发现了意想不到的视觉差异：

这张图片展示了 Chromium 和 Safari 中渲染的 <select> 元素之间的显着差异：

Safari 渲染呈现出过时的、有光泽的外观，与 Chromium 中的干净外观不同。 经过对 Stack Overflow 和 ChatGPT 的广泛研究，我终于找到了解决方案。

一个常见的 Stack Overflow 建议是使用 -webkit-appearance: none;。 但是，这会删除下拉箭头指示器，影响用户体验。

随后提到的一种更有前途的方法涉及使用 SVG 背景图像。 事实证明，在应用背景颜色时这很棘手。

利用 Lucide.dev 图标，我合并了一个 SVG 箭头。 然而，最初，通过 CSS 变量进行动态颜色更改失败了。 @media 元素内的 select 查询也被证明是无效的：

<code class="language-css">select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url('data:image/svg+xml;utf8,<svg 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 12 15 18 9"></path></svg>') no-repeat;
  /* ...rest of the CSS... */
}</code>

感谢 ChatGPT，解决方案涉及对 SVG 字符串进行 URL 编码：

<code class="language-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;
  }
}</code>

最终结果：一致、跨浏览器兼容的<select>元素，支持暗/亮模式。

此解决方案应该可以节省其他人解决这一常见的跨浏览器样式挑战的时间和精力。 有关 devpad 项目的更多详细信息，请参阅我最新的博文。

以上是如何修复 webkit (Safari) 中的光泽选择的详细内容。更多信息请关注PHP中文网其他相关文章！