Universität Heidelberg Gestaltungsrichtlinie

5.1.8 forms.base.select Select list

The <select> element represents a form field for selecting amongst a set of options.

Known limitation: by default, Chrome and Safari on OS X allow very limited styling of <select>, unless a border property is set. The default font weight on optgroup elements cannot safely be changed in Chrome on OSX and Safari on OS X.

Example

A standard drop-down

A multi-item select field

A disabled drop-down

Markup: base/forms/forms-select.twig

<div>
  <label for="selectDropdown">A standard drop-down</label>
  <select class="{{modifier_class}}" id="selectDropdown">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <optgroup label="More options">
      <option>Option 4</option>
      <option>Option 5</option>
    </optgroup>
  </select>
</div>

<div>
  <label for="selectMultiItem">A multi-item select field</label>
  <select class="{{modifier_class}}" id="selectMultiItem" multiple>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <optgroup label="More options">
      <option>Option 4</option>
      <option>Option 5</option>
    </optgroup>
  </select>
</div>

<div>
  <label for="selectDisabled">A disabled drop-down</label>
  <select class="{{modifier_class}}" id="selectDisabled" disabled>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <optgroup label="More options">
      <option>Option 4</option>
      <option>Option 5</option>
    </optgroup>
  </select>
</div>

Source: base/forms/_forms.scss, line 227