HTML-tools

Gratis Customizable Select Generator

Generate CSS for customizable select elements using appearance: base-select, picker icons, checkmarks, and open/closed state styling.

Tool laden...

Wat is Customizable Select Generator?

Het aanpasbare select-element is een nieuwe CSS-functie waarmee u native HTML-select-elementen kunt stylen zonder ze te vervangen door door JavaScript aangedreven div-structuren. Met appearance: base-select kunt u het picker-pictogram, optie-checkmarks en de dropdown-popover stylen terwijl alle ingebouwde toegankelijkheid en formuliergedrag van een echt select-element behouden blijven. Geen JavaScript-dropdownbibliotheek nodig.

Snel antwoord

Style native select-elementen met appearance: base-select (Chrome 135+). Gebruik ::picker-icon voor dropdownpijlen, option::checkmark voor selectie-indicatoren en ::picker(select) voor popover-styling. Native formuliersemantiek en toetsenbordtoegankelijkheid blijven behouden. Fallback is een standaard leesbare select.

Last updated: 2026-05-28

Beperkingen

Aanpasbare select is een zeer nieuwe functie (Chrome 135+) en nog niet in CSS Baseline. Firefox en Safari ondersteunen het nog niet. Test altijd met @supports en bied een leesbare native fallback.
Niet alle aspecten van de select zijn aanpasbaar. De optielijst lay-out, scrollgedrag en mobiele picker-UI worden nog steeds door de browser bepaald. Dit is ontworpen om de select bruikbaar te houden op alle apparaten.
De ::picker-icon en option::checkmark pseudo-elementen maken deel uit van het aanpasbare select-model en kunnen niet worden gebruikt op andere elementen. Ze werken alleen binnen een select met appearance: base-select.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Zo gebruik je deze tool

Voer de selectopties in als waarde|label paren, één per regel.
Kies picker-pictogramstijl (chevron, aangepaste SVG of geen) en checkmarkstijl (vinkje, stip of geen).
Voeg optioneel gesloten-status styling en browser-fallbacknotities toe.
Kopieer de gegenereerde HTML en CSS. De select werkt als een native formulierelement in alle browsers.

Waarvoor je het kunt gebruiken

Style een landenselector dropdown om overeen te komen met een merkontwerpsysteem zonder een aangepaste selectbibliotheek.
Maak een gestylde taalwisselaar die native formuliersemantiek en toetsenbordtoegankelijkheid behoudt.
Bouw een themaselector met aangepaste checkmark-pictogrammen die werkt in formulieren en schermlezers.

Gebruik

Praktische voorbeelden

Voorbeeld

Branded landenselector

Een afrekenformulier heeft een landendropdown nodig die overeenkomt met het ontwerp van de site. Gebruik aanpasbare select met een aangepast chevron-pictogram, merkkleuren en een checkmark voor de geselecteerde optie. De select werkt nog steeds als een native formulierelement.

Voorbeeld

Themaschakelaar dropdown

Een documentatiesite heeft een licht/donker thema-schakelaar. Style de select met appearance: base-select, een aangepast SVG zon/maan-pictogram als picker-indicator en thema-achtergrondkleuren voor de popover.

Veelgemaakte fouten

Verwachten dat aanpasbare select werkt in alle browsers - het vereist Chrome 135+ met experimentele functies. Oudere browsers tonen een standaard native select.
appearance: none gebruiken in plaats van appearance: base-select - het eerste verwijdert alle native styling inclusief toegankelijkheidsrollen.
Vergeten dat base-select nog niet in de CSS Baseline zit - test altijd en bied een leesbare native select als fallback.

Verificatie

Test de select in Chrome 135+ om te bevestigen dat de aangepaste styling correct wordt weergegeven met het picker-pictogram en checkmarks.
Test in Firefox en Safari om te verifiëren dat de select terugvalt naar een leesbaar native uiterlijk.

FAQ

Vragen over Customizable Select Generator

Wat is het verschil tussen appearance: none en appearance: base-select?

appearance: none verwijdert ALLE native select-styling, inclusief de dropdownpijl, en kan toegankelijkheid breken. appearance: base-select behoudt de native semantiek en toetsenbordgedrag terwijl u de visuele delen (pictogram, checkmark, popover) kunt stylen. base-select is de veilige manier om selects aan te passen.

Welke browsers ondersteunen aanpasbare select?

Chrome 135+ met "Experimental Web Platform Features" ingeschakeld. Dit is een zeer nieuwe functie en nog niet in CSS Baseline. Gebruik voor productie @supports (appearance: base-select) om aangepaste stijlen alleen toe te passen in ondersteunende browsers en toon de native select als fallback elders.

Gerelateerde tools