Select

Use .velin-select to apply custom styling to native <select> elements with a custom caret, consistent sizing, and theme support.

Default select

Apply .velin-select to any <select> element. A custom dropdown caret is added via background-image.

<select class="velin-select">
  <option selected>Choose an option</option>
  <option value="1">Option One</option>
  <option value="2">Option Two</option>
  <option value="3">Option Three</option>
</select>

Sizing

Use .velin-select--sm or .velin-select--lg to match input sizing.

<select class="velin-select velin-select--sm">...</select>
<select class="velin-select">...</select>
<select class="velin-select velin-select--lg">...</select>

Multiple & size

The multiple attribute or a size attribute greater than 1 renders a scrollable list box.

<select class="velin-select" multiple>
  <option selected>Alpha</option>
  <option>Bravo</option>
  <option>Charlie</option>
  <option>Delta</option>
</select>

<select class="velin-select" size="3">
  <option selected>Alpha</option>
  <option>Bravo</option>
  <option>Charlie</option>
  <option>Delta</option>
</select>

Disabled

Add disabled to prevent interaction.

<select class="velin-select" disabled>
  <option selected>Disabled select</option>
</select>