0Pricing
HTML Academy · Lezione

L’elemento selectlist

Personalizzare i controlli a discesa con l’elemento selectlist proposto

L’elemento selectlist è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.

La limitazione di lunga data

L'elemento <select> è uno dei pochi controlli di modulo di cui non è possibile personalizzare l'aspetto. Ogni regola CSS applicata a questo elemento, come bordi personalizzati, font e stili delle option, viene ignorata dal browser, dando origine a migliaia di librerie per "custom dropdown" che duplicano il comportamento nativo solo per poter stilizzare le option.

Che cos'è selectlist

<selectlist>, noto anche come <selectmenu>, è un elemento HTML nativo progettato come sostituto personalizzabile di <select>. Adotta lo stesso modello concettuale, con un pulsante trigger e un elenco di option, ma espone ogni parte alla personalizzazione CSS.

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

Parti personalizzabili con CSS

selectlist espone il pulsante, cioè il trigger nello stato chiuso, il listbox, cioè il dropdown aperto, e le option. Gli pseudo-elementi CSS (::part(button), ::part(listbox)) consentono di stilizzare ciascuna parte senza alterare il comportamento nativo.

Personalizzare le option

Le option all'interno di selectlist possono contenere contenuti arbitrari, come icone, descrizioni e layout personalizzati, non solo testo. Il browser continua a gestire la logica di selezione, la navigazione da tastiera e la gestione del focus, mentre Lei controlla liberamente l'aspetto.

Comportamenti integrati preservati

selectlist conserva tutti i punti di forza di <select>: navigazione da tastiera, con frecce e ricerca durante la digitazione, annunci per gli screen reader, partecipazione ai moduli e gestione del focus. Eredita il comportamento accessibile e consente di personalizzare l'interfaccia.

Pulsante personalizzato

Fornisca uno slot per il trigger: <button slot="button">Choose fruit <svg>...</svg></button>. Il pulsante è completamente personalizzabile: può sostituire il triangolo nativo con un'icona personalizzata, aggiungere etichette e modificare i colori. Il browser continua a gestire l'apertura e la chiusura.

Partecipazione ai moduli

selectlist partecipa all'invio del modulo proprio come select: ha un attributo name, un value e viene inviato insieme al modulo. La gestione lato server è identica. A livello di markup è un sostituto diretto per la maggior parte dei casi d'uso di select.

Supporto dei browser

selectlist è una funzionalità ancora nelle prime fasi di sviluppo. Nel 2026 è disponibile nei browser basati su Chromium dietro flag o in forma limitata. Firefox e Safari non lo supportano ancora. In produzione è necessario prevedere il fallback a un normale <select> per i browser non supportati.

Difficoltà del polyfill

Creare un polyfill per un dropdown personalizzato completamente accessibile e con un comportamento uguale a quello nativo è difficile: gestione del focus, navigazione da tastiera, integrazione con gli screen reader e partecipazione ai moduli. Librerie come Downshift, Combobox e react-aria svolgono questo lavoro con migliaia di righe di codice. selectlist sostituisce tutto questo con un solo elemento.

Quando adottarlo

Per le app interne o le distribuzioni limitate a Chromium, selectlist consente già oggi di risparmiare una notevole quantità di codice. Per i siti pubblici rivolti a un'ampia platea, attenda il supporto di Firefox e Safari oppure utilizzi una libreria wrapper che usi selectlist dove disponibile e ricorra altrove a un dropdown personalizzato in React/Vue.

Roadmap della sostituzione

Quando selectlist sarà disponibile ovunque, è probabile che molte librerie per dropdown personalizzati vengano dichiarate obsolete o si riducano a semplici wrapper dell'elemento nativo. Segua il processo di standardizzazione: l'API ha già subito diverse revisioni e potrebbe continuare a evolversi prima della standardizzazione definitiva.

Implicazioni per il design

I designer possono ora definire dropdown perfettamente fedeli al pixel senza dover aggiungere la precisazione «Questo è il design, ma nel browser il dropdown avrà un aspetto diverso». selectlist elimina una delle incongruenze visive più longeve tra i mockup di design e l'HTML effettivamente pubblicato.

Verifica delle conoscenze

Perché l'elemento selectlist è importante? Quale limite del