De <select> element kan nu worden aangepast met CSS

Adam Argyle

Gepubliceerd: 24 maart 2025

Vanaf Chrome 135 kunnen webontwikkelaars en ontwerpers zich eindelijk verenigen op een toegankelijk, gestandaardiseerd en CSS-stijlbaar <select> -element op internet. Er is vele jaren aan gewerkt, er zijn vele uren technisch en gezamenlijk specificatiewerk aan besteed, en het resultaat is een ongelooflijk rijke en krachtige component die in oudere browsers niet kapot zal gaan.

Hier is een video van aangepaste selecties met behulp van deze nieuwe functies:

Met demo's van Una , Brecht en Adam .

Als je het goed hebt gevolgd, zul je merken dat een aantal specificaties en functies zijn veranderd sinds Una 's verzoek om feedback van de community . Gelukkig kun je bij Una ook terecht als je vanuit die functie hebt gewerkt en geïnteresseerd bent in wat er is veranderd.

Er is ook gloednieuwe documentatie over MDN voor aanpasbare selectie , boordevol details.

Ontmoet appearance: base-select

Een nieuw appearance: base-select dat het <select> -element in een nieuwe, configureerbare en stijlbare staat plaatst, waarnaar gewoonlijk wordt verwezen als "base"-stijlen:

.custom-select {
  &, &::picker(select) {
    appearance: base-select;    
  }
}

Het gebruik van base-select ontgrendelt een aantal nieuwe functies en gedragingen:

  • Wijzigt de HTML-parser van de browser voor de inhoud binnen <select> .
  • Verandert de gerenderde internals van de <select> .
  • Toont nieuwe interne onderdelen en statussen voor de <select> .
  • Een nieuwe, minimalistische look, geoptimaliseerd voor maatwerk.
  • Getoonde opties bevinden zich in de bovenste laag, zoals een popover.
  • Getoonde opties gepositioneerd met anchor() .

Als u base-select gebruikt, gaat een aantal functies en gedragingen verloren :

  • De <select> wordt niet weergegeven buiten het browservenster.
  • Er worden geen ingebouwde componenten van het mobiele besturingssysteem geactiveerd.
  • De <select> neemt niet langer de breedte van de langste <option> over.

Een <select> kan nu rijke HTML-inhoud bevatten

Voordat u een <select> kon aanpassen, zou de browser deze negeren als u zaken als een afbeelding of SVG in het <option> -element zou plaatsen.

Beschouw de volgende HTML, de browser zou deze lezen zoals u deze heeft geschreven:

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

De gebruikte DOM zou echter niet de <svg> bevatten:

<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 ziet u (van links naar rechts) hoe Chrome, Safari en Firefox de voorgaande HTML weergeven. Als de browser appearance: base-select ondersteunt, verschijnt de SVG in de optie, anders niet.

Chrome, Safari en Firefox tonen een selectie met SVG erin. Chrome toont de afbeeldingen, Safari en Firefox renderen alsof er geen afbeeldingen zijn.
Probeer het in deze Codepen .

Er bestaat een risico bij het verbreken van bestaande websites met aanpasbare selectie, vanwege de wijzigingen in de parser. Chrome heeft de functies achter een Finch-experiment voor het geval er een noodgeval is om het uit te schakelen. Als alles goed gaat, eindigt het experiment en wordt de code permanent naar de bron verzonden.

Volledig aanpasbaar

Elk onderdeel van een base-select kan worden verwisseld, aangepast en geanimeerd. Hier is een demo die elke nieuwe functie gebruikt om herkenbare en betekenisvolle geselecteerde ervaringen te creëren.

Van een geselecteerd element worden vier verschillende presentaties getoond. De eerste heeft een statusindicatorstip die groen is, met een label van aan. De volgende toont avatars naast de opties. De derde is een kleurruimtekiezer met een aangepast label ingebouwd in de selectie. Met dit laatste kunt u concept- of gepubliceerde staten kiezen.
Probeer het in deze Codepen .

Vind nog veel meer voorbeelden in de bronnensectie aan het einde van dit bericht.

Ongewijzigde JavaScript-interfaces

Er zijn geen risico's voor uw bestaande JavaScript-interacties met een <select> -element.

Als u echter rijke HTML aan uw <option> -elementen begint toe te voegen, moet u de geselecteerde waarden testen, aangezien de browser nog steeds afbeeldingen en SVG parseert en negeert. De logica is echter veranderd: voor het bepalen van de geselecteerde inhoudsreeks, en afhankelijk van wat u in uw opties heeft, moet u mogelijk aanpassingen maken.

Als u het value op een <option> gebruikt, hoeft u zich nergens zorgen over te maken.

Bronnen

Chrome is de eerste die base-select implementeert, maar elke browser heeft meegedaan aan de specificaties en er moeten nog meer 'basis'-elementen worden voltooid. Dit is nog maar een begin.

Houd ons in de gaten, want we zullen doorgaan met het toevoegen van richtlijnen, voorbeelden en bronnen voor het aanpassen van bepaalde elementen. Tot die tijd kunt u de volgende links raadplegen voor meer informatie.

Speciale dank aan iedereen die hieraan heeft meegewerkt!