Gli elementi select ed option sono notoriamente gli elementi più difficili da stilizzare con i CSS. In questo articolo vedremo perché è così difficile ottenere effetti coerenti nei browser.
Le specifiche CSS non definiscono un layout predefinito per questo tipo di elementi. L'unico valore storicamente riportato nelle specifiche CSS 2.1 è il valore inline-block per la proprietà display, valore che tutti i browser onorano.
Ma accanto a questa regola standard esistono decine di altre regole che ciascun browser applica a questi elementi basandosi sull'aspetto generale della GUI del sistema operativo e su convenzioni visuali che risalgono ad almeno venti anni fa, adattate progressivamente nel corso del tempo alle nuove release.
Ad esempio, il browser Google Chrome applica questi stili predefiniti all'elemento select:
| Proprietà | Valore |
|---|---|
| align-items | center |
| appearance | auto |
| background-color | RGB(255,255,255) |
| bordi | colore e spessore |
| box-sizing | border-box |
| color | RGB(0,0,0) |
| cursor | default |
| display | inline-block |
| font-family | Arial |
| font-size | 13.3333px |
| font-weight | 400 |
E questi stili all'elemento option:
| Proprietà | Valore |
|---|---|
| align-items | center |
| padding | 0 2px 1px 2px |
| column-gap | 6.66667px |
| row-gap | 6.66667px |
| min-width | 24px (come block size e inline size) |
| color | RGB(0,0,0) |
| cursor | default |
| display | block |
| font-family | Arial |
| font-size | 13.3333px |
| font-weight | 400 |
| white-space | nowrap |
Come si può notare, le proprietà in azione sono diverse. È da notare che esiste una profonda differenza tra i due elementi: mentre select è più facilmente manipolabile sovrascrivendo ad esempio le proprietà del box model, del tipo di layout e dei font, l'elemento option è quasi del tutto insensibile a tentativi di modifica diretta.
Una soluzione radicale, applicata all'elemento select, consiste nell'azzerare completamente il suo modello di visualizzazione con la dichiarazione appearance: none. Questa soluzione deve essere ponderata: così facendo si possono introdurre potenziali problemi di accessibilità, in quanto si va ad influenzare l'intero comportamento dell'elemento nel browser.
In definitiva, l'elemento select è più semplice da stilizzare rispetto all'elemento option. Nel secondo caso, infatti, entrano in gioco gli algoritmi di gestione del layout dei browser su cui i CSS hanno ancora un controllo limitato.