3.5.3 atoms.form-controls.select Select list

Toggle example guides Toggle HTML markup

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

Styling

The border should light up simply and clearly indicating the user is selecting this form item.

Requirements

You should have put a <div> with the class .select-wrapper around the <select> element for cross-browser styling

Example
Markup: 02-atoms/form-controls/form-select.twig
<div class="form-group">
  <label for="selectDropdown">A standard select</label>
  <div class="select-wrapper">
    <select class="form-control" 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>
Source: 02-atoms/form-controls/_select.scss, line 1