Select
Il classico “menu a tendina”.
Select
La select è composta dal un wrapper esterno .select-wrapper contenente la label e l’elemento <select>.
1
2
3
4
5
6
7
8
9
10
11
<div class="select-wrapper">
<label for="defaultSelect">Etichetta</label>
<select id="defaultSelect">
<option selected="" value="">Scegli un'opzione</option>
<option value="Value 1">Opzione 1</option>
<option value="Value 2">Opzione 2</option>
<option value="Value 3">Opzione 3</option>
<option value="Value 4">Opzione 4</option>
<option value="Value 5">Opzione 5</option>
</select>
</div>
Select disabilitata
Per disabilitare una select, aggiungere l’attributo disabled al tag <select>.
1
2
3
4
5
6
7
8
9
10
11
<div class="select-wrapper">
<label for="defaultSelectDisabled">Etichetta</label>
<select id="defaultSelectDisabled" disabled>
<option selected="" value="">Scegli un'opzione</option>
<option value="Value 1">Opzione 1</option>
<option value="Value 2">Opzione 2</option>
<option value="Value 3">Opzione 3</option>
<option value="Value 4">Opzione 4</option>
<option value="Value 5">Opzione 5</option>
</select>
</div>
Select con gruppi
Per ottenere select con raggruppamenti, utilizzare il tag HTML <optgroup> per raggruppare le <option> al suo interno.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="select-wrapper">
<label for="defaultSelectGroup">Etichetta</label>
<select id="defaultSelectGroup">
<option selected="" value="">Scegli un'opzione</option>
<optgroup label="Gruppo 1">
<option value="1">Opzione 1</option>
<option value="2">Opzione 2</option>
</optgroup>
<optgroup label="Gruppo 2">
<option value="3">Opzione 3</option>
<option value="4">Opzione 4</option>
</optgroup>
</select>
</div>