Diese Seite wurde von der Cloud Translation API übersetzt.

Das Element kann jetzt mit CSS angepasst werden Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren. .wd-authors { --avatar-size: 65px; display: flex; gap: 2em; } .wd-author { display: flex; flex-wrap: wrap; gap: 1em; line-height: calc(var(--avatar-size) / 2); } .wd-author img { border-radius: 50%; height: var(--avatar-size, 65px); width: var(--avatar-size, 65px); } .dcc-authors { --avatar-size: 65px; display: flex; gap: 2em; } .dcc-author { display: flex; flex-wrap: wrap; gap: 1em; line-height: calc(var(--avatar-size) / 2); } .dcc-author img { border-radius: 50%; height: var(--avatar-size, 65px); width: var(--avatar-size, 65px); } .dcc-author__links { display: flex; } .dcc-author__links a { margin-inline-end: 6px; } .dcc-author__links a:last-of-type { margin-inline-end: 0; } Adam Argyle X GitHub Störung Startseite Veröffentlicht: 24. März 2025 Ab Chrome 135 können Webentwickler und ‑designer endlich ein barrierefreies, standardisiertes und mit CSS stilisierbares <select>-Element im Web verwenden. Die Entwicklung hat viele Jahre gedauert und viele Stunden an Entwicklungs- und gemeinsamer Spezifikationsarbeit erfordert. Das Ergebnis ist eine unglaublich umfangreiche und leistungsstarke Komponente, die auch in älteren Browsern funktioniert. Hier siehst du ein Video mit Beispielen für benutzerdefinierte Auswahlen mit diesen neuen Funktionen: Demos von Una, Brecht und Adam. Wenn Sie die Entwicklung genau verfolgt haben, werden Sie feststellen, dass sich einige Namen und Funktionen der Spezifikationen seit Unas Anfrage nach Communityfeedback geändert haben. Wenn du anhand dieses Beitrags gearbeitet hast und wissen möchtest, was sich geändert hat, ist Una für dich da. Außerdem gibt es eine brandneue Dokumentation auf MDN für anpassbare Auswahl, die viele Details enthält. Meet appearance: base-select Eine neue CSS-Eigenschaft appearance: base-select, die das Element <select> in einen neuen, konfigurierbaren und stilbaren Zustand versetzt, der allgemein als „Basisstil“ bezeichnet wird: .custom-select { &, &::picker(select) { appearance: base-select; } } Wenn Sie base-select verwenden, werden eine Reihe neuer Funktionen und Verhaltensweisen freigeschaltet: Ändert den HTML-Parser des Browsers für den Inhalt in der <select>. Ändert die gerenderten internen Elemente der <select>. Hier werden neue interne Teile und Status für die <select> angezeigt. Ein neues minimalistisches Design, das für die Anpassung optimiert ist. Die angezeigten Optionen befinden sich in der obersten Ebene, z. B. in einem Pop-up. Angezeigte Optionen, die mit anchor() positioniert sind Wenn Sie base-select verwenden, sind einige Funktionen und Verhaltensweisen nicht mehr verfügbar: Das <select> wird nicht außerhalb des Browserfensters gerendert. Es werden keine integrierten Komponenten des mobilen Betriebssystems ausgelöst. Die <select> nimmt nicht mehr die Breite des längsten <option> an. Es werden im Laufe der Zeit weitere „Basis“-Darstellungen für andere Elemente entwickelt. <select> können jetzt Rich-HTML-Inhalte enthalten Bevor Sie <select> anpassen konnten, wurden Elemente wie Bilder oder SVGs, die Sie in das <option>-Element eingefügt haben, vom Browser ignoriert. Betrachten Sie das folgende HTML-Element. Der Browser würde es so lesen, wie Sie es geschrieben haben: <select class="custom-select"> <option> <svg aria-hidden>…</svg> <span>HTML</span> </option> <option> <svg aria-hidden>…</svg> <span>CSS</span> </option> <option> <svg aria-hidden>…</svg> <span>JavaScript</span> </option> <option> <svg aria-hidden>…</svg> <span>WASM</span> </option> </select> Das verwendete DOM enthält jedoch keine <svg>: <select class="custom-select"> <option> <span>HTML</span> </option> <option> <span>CSS</span> </option> <option> <span>JavaScript</span> </option> <option> <span>WASM</span> </option> </select> Hier sehen Sie (von links nach rechts) Chrome, Safari und Firefox, die die vorherige HTML-Datei rendern. Wenn der Browser appearance: base-select unterstützt, wird das SVG in der Option angezeigt. Andernfalls nicht. In diesem Codepen ausprobieren Aufgrund der Änderungen am Parser besteht das Risiko, dass vorhandene Websites mit anpassbaren Auswahlelementen nicht mehr funktionieren. Chrome verfügt über die Funktionen eines Finch-Tests, falls er in einem Notfall deaktiviert werden muss. Wenn alles in Ordnung ist, wird der Test beendet und der Code dauerhaft in die Quelle übernommen. Vollständig anpassbar Jeder Teil eines base-select kann ausgetauscht, angepasst und animiert werden. Hier ist eine Demo, in der alle neuen Funktionen verwendet werden, um erkennbare und aussagekräftige Auswahlmöglichkeiten zu erstellen. In diesem Codepen ausprobieren Im Abschnitt „Weitere Informationen“ am Ende dieses Beitrags finden Sie viele weitere Beispiele. Unveränderte JavaScript-Schnittstellen Vorhandene JavaScript-Interaktionen mit einem <select>-Element sind nicht gefährdet. Wenn Sie Ihren <option>-Elementen jedoch Rich-HTML hinzufügen, sollten Sie die ausgewählten Werte testen, da der Browser Bilder und SVG weiterhin parst und ignoriert. Die Logik zur Bestimmung des ausgewählten Inhaltsstrings hat sich jedoch geändert. Je nach Ihren Optionen müssen Sie möglicherweise Anpassungen vornehmen. Wenn Sie das value-Attribut für ein <option> verwenden, müssen Sie sich keine Sorgen machen. Ressourcen Chrome ist der erste Browser, der base-select implementiert, aber alle Browser haben an den Spezifikationen mitgewirkt. Es gibt noch weitere „Basis“-Elemente, die fertiggestellt werden müssen. Das ist erst der Anfang. Wir werden demnächst weitere Anleitungen, Beispiele und Ressourcen zur Anpassung ausgewählter Elemente hinzufügen. Bis dahin findest du unter den folgenden Links weitere Informationen. Webstandards UI-Select öffnen Pull-Request für HTML-Spezifikation Versandabsicht MDN Chrome Anfrage zu Kommentaren und tolle Una-Erläuterung Ergebnisse der Anforderung von Kommentaren <hr> in einer <select> verwenden Una erklärt die einzelnen Teile Una Codepen-Sammlung Community Codepen-Sammlung von Brecht De Ruyte CSS-Tipps für native und benutzerdefinierte Auswahlen Open Props-UI öffnen-<select> Beispiel für benutzerdefinierte Auswahl mit Übergangsanimationen Ein besonderer Dank geht an alle, die daran beteiligt waren. Sofern nicht anders angegeben, sind die Inhalte dieser Seite unter der Creative Commons Attribution 4.0 License und Codebeispiele unter der Apache 2.0 License lizenziert. Weitere Informationen finden Sie in den Websiterichtlinien von Google Developers. Java ist eine eingetragene Marke von Oracle und/oder seinen Partnern. Zuletzt aktualisiert: 2025-03-24 (UTC). Beitragen Fehler melden Offene Fragen ansehen Weitere Informationen Chromium-Updates Fallstudien Archivieren Podcasts und Sendungen Folgen @ChromiumDev auf X YouTube Chrome für Entwickler auf LinkedIn RSS Nutzungsbedingungen Datenschutz Manage cookies English Deutsch Español – América Latina Français Indonesia Italiano Nederlands Polski Português – Brasil Tiếng Việt Türkçe Русский עברית العربيّة فارسی हिंदी বাংলা ภาษาไทย 中文 – 简体 中文 – 繁體 日本語 한국어