PricingLoginStart free
HTML Academy · Oppitunti

selectlist-elementti

Mukauta pudotusvalikkoja ehdotetulla selectlist-elementillä

Oppitunti 3/414 vaihetta

selectlist-elementti on ilmainen HTML Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu HTML Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. HTML Academy-kurssilla on yhteensä 4 oppituntia.

Pitkäaikainen rajoitus

<select>-elementti on yksi harvoista lomakekontrolleista, joiden ulkoasua ei voi tyylitellä. Selain ohittaa kaikki siihen kohdistetut CSS-säännöt, kuten mukautetut reunukset, fontit ja option-tyylit, minkä vuoksi tuhannet ”custom dropdown” -kirjastot toistavat natiivin toiminnallisuuden vain saadakseen vaihtoehdot tyyliteltyä.

Mikä selectlist on

<selectlist> (myös nimellä <selectmenu>) on natiivi HTML-elementti, joka on suunniteltu tyyliteltäväksi <select>-elementin korvaajaksi. Se käyttää samaa perusmallia — painikkeena toimivaa laukaisinta ja vaihtoehtoluetteloa — mutta jokainen osa on CSS:n mukautettavissa.

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

Muotoiltavat osat

selectlist tuo näkyviin painikkeen (suljetun tilan laukaisin), listboxin (avattu pudotusvalikko) ja vaihtoehdot. CSS-pseudoelementtien (::part(button), ::part(listbox)) avulla voitte tyylitellä jokaisen osan vaikuttamatta natiiviin toimintaan.

Vaihtoehtojen mukauttaminen

selectlistin vaihtoehdot voivat sisältää mitä tahansa sisältöä — kuvakkeita, kuvauksia ja mukautettuja asetteluja — eivät vain tekstiä. Selain hallitsee edelleen valintalogiikan, näppäimistöllä liikkumisen ja fokuksen hallinnan, samalla kun voitte määrittää ulkoasun vapaasti.

Sisäänrakennetut toiminnot säilyvät

selectlist säilyttää kaiken, missä <select> on hyvä: näppäimistöllä liikkumisen (nuolinäppäimet ja kirjoitushaku), ruudunlukijailmoitukset, lomakkeisiin osallistumisen ja fokuksen hallinnan. Saatte käyttöön saavutettavan toiminnan ja voitte tyylitellä käyttöliittymän sen päälle.

Mukautettu painike

Tarjotkaa laukaisimelle slot: <button slot="button">Choose fruit <svg>...</svg></button>. Painike on täysin teidän muotoiltavanne — voitte korvata natiivin kolmion mukautetulla kuvakkeella, lisätä otsikoita ja vaihtaa värejä. Selain hallitsee silti avaamisen ja sulkemisen.

Osallistuminen lomakkeen lähetykseen

selectlist osallistuu lomakkeen lähetykseen aivan kuten select: sillä on name-määrite ja value-arvo, ja se lähetetään lomakkeen mukana. Palvelinpuolen käsittely on samanlainen. Se on useimmissa select-käyttötapauksissa suoraan markup-tasolla vaihdettava elementti.

Selaintuki

selectlist on varhaisessa kehitysvaiheessa oleva ominaisuus. Vuonna 2026 se on saatavilla Chromium-pohjaisissa selaimissa flagien takana tai rajoitetussa muodossa. Firefox ja Safari eivät vielä tue sitä. Tuotantokäyttö edellyttää, että ominaisuutta tukemattomille selaimille tarjotaan fallback tavalliseen <select>-elementtiin.

Polyfillin toteutuksen vaikeus

Täysin saavutettavan ja natiivista toiminnasta mallinsa ottavan mukautetun pudotusvalikon polyfillaaminen on vaikeaa — fokuksen rajoittaminen, näppäimistöllä liikkuminen, ruudunlukijoiden integrointi ja lomakkeisiin osallistuminen on kaikki toteutettava. Downshiftin, Comboboxin ja react-arian kaltaiset kirjastot hoitavat tämän tuhansilla koodiriveillä. selectlist korvaa kaiken tämän yhdellä elementillä.

Milloin ottaa käyttöön

Sisäisissä sovelluksissa tai vain Chromiumiin tarkoitetuissa julkaisuissa selectlist säästää jo nyt huomattavasti koodia. Laajalle yleisölle tarkoitetuilla julkisilla sivustoilla kannattaa odottaa Firefoxin ja Safarin tukea tai käyttää wrapper-kirjastoa, joka hyödyntää selectlist-elementtiä tuetuissa selaimissa ja käyttää muualla mukautettua React/Vue-pudotusvalikkoa.

Korvaamisen etenemissuunnitelma

Kun selectlist on saatavilla kaikkialla, monet mukautettujen pudotusvalikoiden kirjastot todennäköisesti merkitään vanhentuneiksi tai ne muuttuvat natiivielementin ohuiksi kääreiksi. Seuratkaa standardointiprosessia; API on käynyt läpi muutoksia ja saattaa kehittyä edelleen ennen lopullista standardointia.

Vaikutukset suunnitteluun

Suunnittelijat voivat nyt määritellä pikselintarkkoja pudotusvalikoita ilman huomautuksia, kuten ”Tässä on suunnitelma, mutta pudotusvalikko näyttää selaimessa erilaiselta”. selectlist poistaa yhden pitkäaikaisimmista visuaalisista eroista suunnittelumallien ja julkaistun HTML:n välillä.

Tietotesti

Miksi selectlist-elementillä on merkitystä – mihin natiivin