How to fix glossy selects in webkit (Safari)

Cross-browser compatibility woes: Styling HTML <select> elements in Safari

Maintaining consistent application behavior across different browser engines can be challenging. Recently, while developing devpad—a project where I intentionally avoided UI frameworks and relied heavily on base HTML elements—I encountered a peculiar issue with the <select> element in Safari.

Initially, development proceeded smoothly using Arc (a Chromium-based browser). However, testing in Safari revealed an unexpected visual discrepancy:

This image showcases the jarring difference between the rendered <select> element in Chromium and Safari:

The Safari rendering exhibited an outdated, glossy appearance, unlike the clean look in Chromium. After extensive research across Stack Overflow and ChatGPT, I finally found a solution.

A common Stack Overflow suggestion is to use -webkit-appearance: none;. However, this removes the dropdown arrow indicator, impacting user experience.

A more promising approach, mentioned subsequently, involved using an SVG background image. This proved tricky when also applying a background color.

Leveraging Lucide.dev icons, I incorporated an SVG arrow. Initially, however, dynamic color changes via CSS variables failed. A @media query within the select element also proved ineffective:

<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>

The solution, thanks to ChatGPT, involved URL-encoding the SVG string:

<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>

The final result: consistent, cross-browser compatible <select> elements with dark/light mode support.

This solution should save others time and effort in tackling this common cross-browser styling challenge. For more details on the devpad project, please refer to my latest blog post.

The above is the detailed content of How to fix glossy selects in webkit (Safari). For more information, please follow other related articles on the PHP Chinese website!