PricingLoginStart free
HTML Academy · leksjon

selectlist-elementet

Tilpass nedtrekkskontroller med det foreslåtte selectlist-elementet

Leksjon 3 av 414 trinn

selectlist-elementet er en gratis leksjon i HTML Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i HTML Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i HTML Academy inneholder totalt 4 leksjoner.

Den langvarige begrensningen

Elementet <select> er en av de eneste skjemakontrollene som ikke kan stilsettes fritt. Alle CSS-regler som brukes på det (egendefinerte rammer, skrifter og option-stiler) ignoreres av nettleseren. Det har ført til tusenvis av biblioteker for egendefinerte dropdown-menyer som dupliserer innebygd atferd bare for å kunne style alternativene.

Hva selectlist er

<selectlist> (også kjent som <selectmenu>) er et innebygd HTML-element utviklet som et stilsettbart alternativ til <select>. Det følger den samme konseptuelle modellen – en utløserknapp og en liste med alternativer – men alle delene er tilgjengelige for tilpasning med CSS.

<selectlist>
  <option>Apple</option>
  <option>Banana</option>
  <option>Cherry</option>
</selectlist>

Deler som kan styles

selectlist eksponerer knappen (utløseren i lukket tilstand), listboxen (den åpne dropdown-listen) og alternativene. CSS-pseudoelementer (::part(button), ::part(listbox)) gjør det mulig å style hver del uten å påvirke den innebygde atferden.

Tilpass alternativer

Alternativer i selectlist kan inneholde vilkårlig innhold – ikoner, beskrivelser og egendefinerte oppsett – ikke bare tekst. Nettleseren håndterer fortsatt valgl ogikk, tastaturnavigering og fokushåndtering, mens utseendet kan styres fritt.

Innebygd atferd beholdes

selectlist beholder alt <select> gjør bra: tastaturnavigering (piltaster, skriving for å hoppe), kunngjøringer fra skjermlesere, deltakelse i skjemaer og fokushåndtering. Den tilgjengelige atferden følger med, samtidig som brukergrensesnittet kan styles.

Egendefinert knapp

Angi en slot for utløseren: <button slot="button">Choose fruit <svg>...</svg></button>. Knappen kan utformes fritt – erstatt den innebygde trekanten med et egendefinert ikon, legg til etiketter og endre farger. Nettleseren håndterer fortsatt åpning og lukking.

Deltakelse i skjemaer

selectlist deltar i skjemainnsending på samme måte som select: Det har et name-attributt, en value og sendes inn sammen med skjemaet. Håndtering på serversiden er identisk. Det er en direkte erstatning på markup-nivå for de fleste bruksområder for select.

Nettleserstøtte

selectlist er en funksjon på et tidlig utviklingsstadium. Per 2026 leveres den i Chromium-baserte nettlesere bak flagg eller i begrenset form. Firefox og Safari støtter den ennå ikke. Bruk i produksjon krever en fallback til en vanlig <select> for nettlesere uten støtte.

Vanskeligheten med polyfill

Det er vanskelig å lage en polyfill for en fullt tilgjengelig egendefinert dropdown som samsvarer med innebygd atferd – fokushåndtering, tastaturnavigering, integrasjon med skjermlesere og deltakelse i skjemaer. Biblioteker som Downshift, Combobox og react-aria utfører dette arbeidet med tusenvis av kodelinjer. selectlist erstatter alt dette med ett element.

Når bør du ta det i bruk

For interne apper eller utrullinger som bare bruker Chromium, reduserer selectlist mengden kode betydelig allerede i dag. For offentlige nettsteder med bred målgruppe bør du vente på støtte i Firefox og Safari, eller bruke et wrapper-bibliotek som benytter selectlist der det støttes, og ellers faller tilbake til en egendefinert React/Vue-rullegardinmeny.

Plan for utskifting

Når selectlist er tilgjengelig overalt, kan du forvente at mange biblioteker for egendefinerte rullegardinmenyer blir avviklet eller blir til tynne omslag rundt det innebygde elementet. Følg med på standardiseringsprosessen; API-et har vært gjennom flere revisjoner og kan fortsette å utvikle seg før den endelige standardiseringen.

Konsekvenser for design

Designere kan nå spesifisere rullegardinmenyer med pikselperfekt utforming uten forbeholdet «Her er designet, men rullegardinmenyen vil se annerledes ut i nettleseren». selectlist fjerner en av de mest langvarige visuelle forskjellene mellom designskisser og HTML som faktisk leveres.

Kunnskapssjekk

Hvorfor er selectlist-elementet viktig – hvilken begrensning ved den innebygde