So beheben Sie glänzende Auswahlen im Webkit (Safari)

Probleme mit der browserübergreifenden Kompatibilität: HTML-Elemente <select> in Safari gestalten

Die Aufrechterhaltung eines konsistenten Anwendungsverhaltens über verschiedene Browser-Engines hinweg kann eine Herausforderung sein. Vor Kurzem stieß ich bei der Entwicklung von devpad – einem Projekt, bei dem ich absichtlich auf UI-Frameworks verzichtete und mich stark auf Basis-HTML-Elemente verließ – auf ein eigenartiges Problem mit dem <select>-Element in Safari.

Anfangs verlief die Entwicklung mit Arc (einem Chromium-basierten Browser) reibungslos. Tests in Safari ergaben jedoch eine unerwartete visuelle Diskrepanz:

Dieses Bild zeigt den eklatanten Unterschied zwischen dem gerenderten <select>-Element in Chromium und Safari:

Das Safari-Rendering zeigte im Gegensatz zum sauberen Aussehen in Chromium ein veraltetes, glänzendes Erscheinungsbild. Nach umfangreichen Recherchen zu Stack Overflow und ChatGPT habe ich endlich eine Lösung gefunden.

Ein häufiger Vorschlag für einen Stapelüberlauf ist die Verwendung von -webkit-appearance: none;. Dadurch wird jedoch die Dropdown-Pfeilanzeige entfernt, was sich auf die Benutzererfahrung auswirkt.

Ein vielversprechenderer Ansatz, der später erwähnt wird, beinhaltete die Verwendung eines SVG-Hintergrundbilds. Dies erwies sich als schwierig, wenn auch eine Hintergrundfarbe angewendet wurde.

Ich habe die Lucide.dev-Symbole genutzt und einen SVG-Pfeil integriert. Dynamische Farbänderungen über CSS-Variablen scheiterten jedoch zunächst. Eine @media-Abfrage innerhalb des select-Elements erwies sich ebenfalls als wirkungslos:

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

Die Lösung umfasste dank ChatGPT die URL-Codierung der SVG-Zeichenfolge:

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

Das Endergebnis: konsistente, browserübergreifend kompatible <select> Elemente mit Unterstützung für den Dunkel-/Hellmodus.

Diese Lösung sollte anderen Zeit und Mühe bei der Bewältigung dieser häufigen browserübergreifenden Styling-Herausforderung ersparen. Weitere Details zum Devpad-Projekt finden Sie in meinem neuesten Blog-Beitrag.

Das obige ist der detaillierte Inhalt vonSo beheben Sie glänzende Auswahlen im Webkit (Safari). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!