Select

Select dropdowns are styled automatically on <select> elements, with a custom chevron icon.

Default (native element)

<select>
  <option value="">Choose a country...</option>
  <option value="us">United States</option>
  <option value="ca">Canada</option>
  <option value="uk">United Kingdom</option>
</select>

With field wrapper

Country

<div class="nano-field">
  <label for="country" class="nano-label nano-label--required">Country</label>
  <select id="country" class="nano-select" required>
    <option value="" disabled selected>Select a country</option>
    <option value="us">United States</option>
    <option value="ca">Canada</option>
  </select>
</div>

Disabled

<select disabled>
  <option>Disabled</option>
</select>