Het opmaken van formulierbesturingselementen zoals het <select> -element wordt al jaren gerapporteerd als een van de belangrijkste pijnpunten voor ontwikkelaars, en we hebben aan een oplossing gewerkt. Hoewel dit werk complex is en het veel tijd heeft gekost om het goed te krijgen, komen we heel dicht bij de introductie van deze functie. Een aanpasbare versie van het select-element bevindt zich officieel in fase 2 van de WHATWG , met sterke interesse in meerdere browsers en een prototype dat je kunt testen vanuit Chrome Canary 130.
Probeer het uit en geef ons uw feedback
Controleer of uw installatie van Chrome Canary is bijgewerkt naar versie 130 en of de vlag voor experimentele webplatformfuncties is ingeschakeld. U kunt deze vlag inschakelen door naar chrome://flags in uw adresbalk te gaan en #experimental-web-platform-features in te schakelen. Dan zou je de Codepen-demo's in dit bericht moeten kunnen zien. Als alternatief kunt u deze Codepen-collectie bekijken om ze allemaal op één plek te bekijken.
Gebruik dit formulier om feedback te geven over de functie. Het duurt slechts drie minuten om te voltooien!
Laten we eens kijken naar de functies van de aanpasbare select-API, die voortbouwt op de bestaande HTML-select-tag.
Aanmelden voor het nieuwe <select>
Als u zich wilt aanmelden voor het nieuwe gedrag, gebruikt u de CSS- appearance eigenschap op zowel de selectieknop op de pagina als op de selectiekiezer. Om u aan te melden, stelt appearance: base-select in op uw <select> -element en op de ::picker(select) .
::picker(select) is een nieuw door de user-agent geleverd pseudo-element dat alleen van toepassing is op <select> -elementen die zijn aangemeld voor het nieuwe gedrag met behulp van appearance: base-select . Dit pseudo-element van de picker is de popover die wordt geactiveerd door de basisselectieknop. U kunt zich voor beide aanmelden, zoals weergegeven in de volgende code:
select,
::picker(select) {
appearance: base-select;
}
U kunt ervoor kiezen om alleen de knop op de pagina aan te melden, maar u kunt zich niet alleen de popover voor de kiezer aanmelden zonder de knop op de pagina aan te melden. ::picker(select) wordt slechts eenmaal aangemaakt appearance: base-select wordt toegepast op de <select> .
Nu bent u klaar om uw geselecteerde element aan te passen. De nieuwe aanpasbare selectie wordt geleverd met een aantal standaardstijlen die er in alle browsers en besturingssystemen hetzelfde uitzien. Zo ziet de standaard aangepaste selectie eruit in vergelijking met de bestaande selectie in Chrome op macOS:
Het afbreken van de onderdelen
Zodra u zich in de nieuwe aanpasbare selectiemodus bevindt, zijn de nieuwe elementen waartoe u nu toegang heeft onder meer: - selectedoption : weerspiegelt de interne HTML van de optie die momenteel is geselecteerd. - option::before : contains a checkmark to indicate the currently selected option as a default accessibility affordance (this is subject to change). - ::picker(select) : popover die alle inhoud bevat buiten de button binnen een aanpasbare selectie.
U kunt elk deel van de selectie stylen. U kunt bijvoorbeeld willekeurige niet-interactieve inhoud toevoegen binnen de <option> -elementen, de stijl van de knop op de pagina waarmee de vervolgkeuzelijst voor selecteren wordt geopend, en de vervolgkeuzelijst met opties een stijl geven (de ::picker(select) ) .
U kunt ook de button opmaken, uw eigen pijlindicator gebruiken en willekeurige inhoud toevoegen binnen en rondom elk van de elementen. Naast het toevoegen van inhoud, kunt u al deze nieuwe elementen en standaardstijlen verbergen. Als u bijvoorbeeld geen indicatorvinkje in het ::before pseudo-element van de optie wilt, gebruikt u de volgende CSS.
/* Remove the default checkmark from the selected option */
option::before {
display: none;
}
Hoewel er een onbeperkt aantal elementen in uw selectie kan zitten, zal de browser alles buiten een <button> -element in het ::picker(select) pseudo-element plaatsen, dat zich gedraagt als een popover die aan de knop is verankerd. Deze <button> schakelt de ::picker(select) in of uit. Opties en andere elementen direct binnen de selectie worden in de ::picker(select) gehesen, of u kunt uw eigen verpakking meenemen voor stylingdoeleinden. Ook deze wrapper wordt in het ::picker(select) pseudo-element geplaatst.
<select>
<button>
<selectedoption></selectedoption>
</button>
// Everything else that will go into the ::picker(select) popover
</select>
De nieuwe aanpasbare <select> maakt gebruik van functionaliteit van popover en ankerpositionering . Het is gebouwd met deze twee onderliggende technologieën. Dit betekent dat de vervolgkeuzelijst met opties binnen een selectie fungeert als een popover die is verankerd aan de triggerknop waarmee de selectie wordt geopend.
U kunt ankerpositionering gebruiken om deze ::picker(select) popover op te maken (inclusief om deze aan andere elementen te verankeren). Dit inhoudsmodel betekent ook dat animatiestijlen van de bovenste laag samenwerken met de optielijst om in- en uitstapeffecten te animeren.
Verbeter het bestaande <select> -element
Eerder werkte het Chrome-team aan het idee van een <selectlist> -element. Wat in dit bericht wordt beschreven, is dat de functie opnieuw is ontworpen om in plaats daarvan het bestaande <select> -element te hergebruiken.
Een van de belangrijkste voordelen van het hergebruiken van het bestaande <select> -element is de mogelijkheid om het basis-HTML-element geleidelijk te verbeteren. In vergelijking met een gloednieuw element levert het hergebruik van <select> nog steeds betekenisvolle inhoud op uw pagina op. In het volgende voorbeeld ziet u de aangepaste selectie versus wat een gebruiker in een niet-ondersteunde browser zou zien:
option wordt weergegeven in de reserveversie van het select-element.Basisstijl
Wijzigingen kunnen zo eenvoudig zijn als de visuele stijl van het geselecteerde element. Als u bijvoorbeeld de knopstijlen, de hover- en focusstijlen of de achtergrond van de selectieopties wilt bijwerken. Na aanmelding met appearance: base-select past u elke gewenste CSS toe op de delen van uw selectie.
Om de pijlindicator aan te passen, voegt u uw eigen knop en pijl toe aan de selectie.
<select>
<button>
<selectedoption></selectedoption>
<span>
// Arrow here
</span>
</button>
// Everything else that will go into the ::picker(select) popover
</select>
Stijl vervolgens de pijl:
/* style the arrow */
button span {
/* arrow styles */
transition: rotate 0.2s;
}
/* adjust arrow styles when the picker is open */
select:open button span {
rotate: -180deg;
}
Complexe inhoud binnen opties
Ga nog een stap verder met de mogelijkheid om inhoud toe te voegen en vorm te geven buiten de tekenreeksen binnen de <option> elementen binnen <select> . Een eenvoudig voorbeeld is het toevoegen van vlagafbeeldingen naast landnamen in een vervolgkeuzemenu. Om dit te bereiken, voegt u een afbeeldingselement toe naast de optietekst.
<option value="france">
<img src="img/flag_of_france.svg" alt="" />
<span>France</span>
</option>
Een complexer voorbeeld zou profielfoto's, namen en alternatieve informatie kunnen zijn om u te helpen beslissingen te nemen over welk item u in de vervolgkeuzelijst moet selecteren.
<option value="eur">
<img src="euro-flag.png" alt="" />
<div class="currency">
<div class="currency-short">EUR</div>
<div class="currency-long">Euro</div>
</div>
<div class="symbol" aria-hidden="true">€</div>
</option>
Stijl de geselecteerde optie
Mogelijk wilt u dat de geselecteerde optie in de geselecteerde status anders wordt weergegeven dan in de vervolgkeuzelijst. Een voorbeeld hiervan is de gebruikersinterface van Gmail, waar, om ruimte te besparen, het label wordt verwijderd zodra de optie is geselecteerd. Doe dit door het <selectedoption> -element in te haken voor styling. De <option> bevat alle volgende markeringen:
<option value="reply-all">
<img class="material-symbol" src="material-symbol-reply.png">
<span class="text">Reply all</span>
</option>
Pas nu display: none on .text inside <selectedoption> ' toe om de tekstinhoud te verbergen en alleen het pictogram weer te geven:
selectedoption .text {
display: none;
}
Interactieve opties
Met volledige controle over de stijl van de ::picker(select) kunt u voortbouwen op de vorige demo om deze interactief te maken bij hover en focus. In deze demo wordt de nieuwe functie calc-size() gebruikt om de breedte van de kiezer te animeren, van het tonen van de pictogrammen tot het tonen van de volledige breedte van de opties bij het aanwijzen van de muis of als de selectie een optie heeft met zichtbare focus.
/* base styles when picker is open but not interacted with */
::picker(select) {
width: var(--icon-width);
transition: width 0.5s;
}
/* animate the text in on hover & focus */
::picker(select):hover,
select:has(option:focus-visible)::picker(select) {
/* auto width! */
width: calc-size(auto, size + 0.5rem);
}
Beperkingen en toegankelijkheidsopmerkingen
Met grote macht komt grote verantwoordelijkheid. Om dingen toegankelijk te houden, zijn er enkele beperkingen aan de functie.
- Behalve
<option>-elementen zijn er nog geen interactieve (focusbare) elementen toegestaan binnen de<select>, zoals knoppen of andere elementen. Voorlopig staat het voorgestelde inhoudsmodel alleen<div>,<span>,<option>,<optgroup>,<img>,<svg>en<hr>elementen toe. - Split-knoppen bevinden zich momenteel in de experimenteerfase terwijl we een toegankelijke oplossing uitwerken.
Verwacht wordt dat het inhoudsmodel in de toekomst flexibeler zal worden naarmate het toegankelijkheidsverhaal voor deze ervaringen wordt uitgewerkt.
Conclusie
We zijn verheugd om deze functie te zien evolueren via werkgroepen en standaardisatie-instellingen, en delen onze voortgang terwijl we actief het prototype bouwen en de vorm van deze functie evalueren. Mocht je iets tegenkomen dat niet werkt zoals je verwacht, laat het ons weten!
En hoewel deze functie nog in ontwikkeling is, horen we graag uw feedback via dit korte feedbackformulier .
Bedankt dat u ervoor wilt zorgen dat we dit goed doen en het gemakkelijker maken om toegankelijke, aanpasbare formulierbesturingselementen op internet te bouwen!