Select

Amazium ensures that select dropdowns have a consistent look and feel across all browsers. By default, native select elements render differently on various operating systems and browsers. To address this, Amazium applies global styles that:

Remove the default system styling
Ensure uniform padding, borders, and font size
Add a custom dropdown arrow for a consistent UI
Provide visual feedback on focus and invalid states

To style a <select> dropdown, simply wrap it in a container div with the class .input--select.

Default Select

<fieldset>
  <label for="text">Label</label>
  <div class="input input--select">
    <select>
      <option selected disabled>Please select...</option>
      <option value="">...</option>
      <option value="">...</option>
    </select>
  </div>
  <p class="message">Sorry looks like you choose poorly.</p>
</fieldset>

Disabled Select

<fieldset>
  <label for="text">Label</label>
  <div class="input input--select">
    <select disabled>
      <option selected disabled>Please select...</option>
      <option value="">...</option>
      <option value="">...</option>
    </select>
  </div>
  <p class="message">Sorry looks like you choose poorly.</p>
</fieldset>

Invalid Select

<fieldset class="invalid">
  <label for="text">Label</label>
  <div class="input input--select">
    <select disabled>
      <option selected disabled>Please select...</option>
      <option value="">...</option>
      <option value="">...</option>
    </select>
  </div>
  <p class="message">Sorry looks like you choose poorly.</p>
</fieldset>