Verzoek om feedback van ontwikkelaars: aanpasbare selectie

Una Kravets

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 u 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 : bevat een vinkje om de momenteel geselecteerde optie aan te geven als standaard toegankelijkheidsvergoeding (dit kan worden gewijzigd). - ::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:

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!

Una Kravets

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 u 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 : bevat een vinkje om de momenteel geselecteerde optie aan te geven als standaard toegankelijkheidsvergoeding (dit kan worden gewijzigd). - ::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:

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 eenvoudiger maken om toegankelijke, aanpasbare formulierbesturingselementen op internet te bouwen!

Una Kravets

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 u 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 : bevat een vinkje om de momenteel geselecteerde optie aan te geven als standaard toegankelijkheidsvergoeding (dit kan worden gewijzigd). - ::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:

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!

Una Kravets

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>

Om u aan te melden voor het nieuwe gedrag, gebruikt u de eigenschap CSS- appearance op zowel de knop In-Page Select en ook op de select-picker. Om u aan te melden, Stel appearance: base-select op uw <select> -element en op de ::picker(select) .

::picker(select) is een nieuwe gebruikersagent die pseudo-element heeft verstrekt die alleen van toepassing is op <select> -elementen die zijn gekozen in het nieuwe gedrag met behulp van appearance: base-select . Deze picker pseudo-element is de popover die wordt geactiveerd door de basis selectknop. U kunt zich aanmelden, zoals weergegeven in de volgende code:

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

U kunt ervoor kiezen om alleen de in-pagina-knop op te melden, maar u kunt niet alleen de Picker Popover aanmelden zonder in de knop Inpage te kiezen. ::picker(select) wordt alleen gemaakt zodra appearance: base-select wordt toegepast op de <select> .

Nu ben je klaar om je geselecteerde element aan te passen. De nieuwe aanpasbare selectie wordt geleverd met enkele standaardstijlen die er hetzelfde uitzien voor browsers en besturingssystemen. Dit is hoe de standaard aangepaste selectie eruit ziet tegen de bestaande selectie in Chrome op macOS:

De onderdelen afbreken

Zodra u in de nieuwe aanpasbare selectiemodus zit, hebben de nieuwe elementen waar u nu toegang toe hebt: - selectedoption : weerspiegelt de innerlijke HTML van de optie die momenteel is geselecteerd. - option::before : bevat een vinkje om de momenteel geselecteerde optie aan te geven als een standaard toegankelijkheidsinstelling (dit kan worden gewijzigd). - ::picker(select) : Popover die alle inhoud buiten de button bevat binnen een aanpasbare selectie.

U kunt elk deel van de selectie stylen. U kunt bijvoorbeeld willekeurige niet-interactieve inhoud toevoegen in de elementen <option> , de in-pagina-knop Style die de vervolgkeuzelijst selecteren opent en de vervolgkeuzelijst met opties stylen (de ::picker(select) ).

U kunt ook de button stylen, uw eigen pijlindicator meenemen en willekeurige inhoud toevoegen binnen en omringen van een van de elementen. Naast het toevoegen van inhoud, kunt u al deze nieuwe elementen en standaardstijlen verbergen. Als u bijvoorbeeld geen indicatorcheckmark in het :: Voordat 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 zijn, zal de browser alles buiten een <button> -element in de ::picker(select) pseudo-element zijn, die zich gedraagt ​​als een popover verankerd op de knop. Dit <button> schakelt de ::picker(select) . Opties en andere elementen direct binnen de selectie worden gehesen in de ::picker(select) , of u kunt uw eigen wrapper meenemen voor stylingdoeleinden. Ook deze wrapper wordt in de ::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-optielijst binnen een select werkt als een popover die is verankerd naar de trigger-knop die de selectie opent.

U kunt ankerpositionering gebruiken om dit te stylen ::picker(select) Popover (inclusief het verankeren van andere elementen). Dit contentmodel betekent ook dat toplaaganimatiestijlen werken met de optielijst om invoer- en exit -effecten 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 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, zal het hergebruiken <select> nog steeds zinvolle inhoud op uw pagina maken. Het volgende voorbeeld toont de aangepaste selectie versus wat een gebruiker in een niet-ondersteunde browser zou zien:

Basisstyling

Veranderingen kunnen zo eenvoudig zijn als visuele styling van het geselecteerde element. Bijvoorbeeld om de knopstijlen bij te werken, te zweven en focusstijlen of de achtergrond van de selecte opties. Nadat u zich hebt aangemeld met appearance: base-select , past u CSS die u wilt op de delen van uw selectie toe.

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

Neem dingen verder met de mogelijkheid om inhoud toe te voegen en stylen verder dan tekenreeksen binnen de <option> -elementen binnen <select> . Een basisvoorbeeld 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 kan profielfoto's, namen en alternatieve informatie bevatten om u te helpen beslissingen te nemen over welk item u moet selecteren in de vervolgkeuzelijst.

<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

Misschien wilt u dat de geselecteerde optie anders wordt weergegeven in de geselecteerde status dan in de vervolgkeuzelijst. Een voorbeeld hiervan is de Gmail -gebruikersinterface, waarbij, om ruimte te besparen, het label wordt verwijderd zodra de optie is geselecteerd. Doe dit door aan te sluiten op het element <selectedoption> voor styling. De <option> bevat alle volgende markup:

 <option value="reply-all">
    <img class="material-symbol"  src="material-symbol-reply.png">
    <span class="text">Reply all</span>
  </option>

Pas nu display: none op .text Inside <selectedoption> 'Om de tekstinhoud te verbergen en alleen het pictogram weer te geven:

selectedoption .text {
  display: none;
}

Interactieve opties

Met volledige controle over de styling van de ::picker(select) , bouw je op de vorige demo om het interactief te maken op Hover en Focus. In deze demo wordt de nieuwe calc-size () -functie gebruikt om de breedte van de picker te animeren van het weergeven van de pictogrammen tot het tonen van de volledige breedte van de opties op Hover of als de select een optie heeft met focus-zichtbaar.

/* 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 toegankelijkheid notes

Met grote kracht komt grote verantwoordelijkheid. Om dingen toegankelijk te houden, zijn er enkele beperkingen aan de functie.

• Anders dan <option> -elementen, zijn er nog geen interactieve (focusbare) elementen toegestaan ​​binnen de <select> , zoals knoppen of andere elementen. Voor nu zorgt het voorgestelde contentmodel alleen voor <div> , <span> , <option> , <optgroup> , <img> , <svg> en <hr> elementen.
• Split -knoppen bevinden zich momenteel in de experimentele fase terwijl we een toegankelijke oplossing uitwerken.

In de toekomst wordt verwacht dat het contentmodel wordt uitgebreid om flexibeler te zijn, omdat het toegankelijkheidsverhaal voor deze ervaringen uitgewerkt is.

Conclusie

We zijn verheugd om te zien dat deze functie de voortgang van werkgroepen en normen van de normen vooruitgang zal zien en onze vooruitgang delen terwijl we het prototype actief bouwen en de vorm van deze functie evalueren. Als je iets tegenkomt dat niet werkt zoals je verwacht, laat het ons weten!

En hoewel deze functie nog steeds in ontwikkeling is, horen we graag uw feedback via dit korte feedbackformulier .

Bedankt dat je er deel van hebt om ervoor te zorgen dat we dit goed hebben en het gemakkelijker maken om toegankelijke, aanpasbare formulierbesturingselementen op internet te bouwen!