Select

The select element’s width can be tricky. It should take up the space its content needs. But it should not grow beyond the size of the browser. We can solve this by combining two classes:

The wauto utility class sets the width equal to the length of the longest option.
The maxw100p prevents overflow.

Optgroup is a nice way to gather things like different customer numbers under one master customer number or name.

<label class="form__label" for="spaceships">Spaceship</label>
<select id="spaceships" class="form__control wauto maxw100p">
<option>Azure Dragon</option>
<option>Donnager</option>
<option>Nauvoo</option>
<option>Rocinante</option>
</select>

<label class="form__label" for="spaceshipgroups">Spaceship in group</label>
<select id="spaceshipgroups" class="form__control wauto maxw100p">
<optgroup label="Old types">
  <option>Azure Dragon</option>
  <option>Donnager</option>
</optgroup>
<optgroup label="New types">
  <option>Nauvoo</option>
  <option>Rocinante</option>
</optgroup>
</select>