3.0.0-alpha.11 Alpha
Native Styles

Select

<select>

Selects allow you to choose items from a menu of predefined options.

Want to do more? Check out the <wa-select> component! 
<label>Select
  <select id="select">
    <option value="option-1">Option 1</option>
    <option value="option-2">Option 2</option>
    <option value="option-3">Option 3</option>
  </select>
</label>

Examples

Appearance

Use the appearance utilities to change the select's visual appearance.

<label>Select
  <select id="select" class="wa-filled">
    <option value="option-1">Option 1</option>
    <option value="option-2">Option 2</option>
    <option value="option-3">Option 3</option>
  </select>
</label>

Grouping options

In modern browsers, you can use the <hr> element as a divider:

<select>
  <small>Section 1</small>
  <option value="option-1">Option 1</option>
  <option value="option-2">Option 2</option>
  <option value="option-3">Option 3</option>
  <hr />
  <small>Section 2</small>
  <option value="option-4">Option 4</option>
  <option value="option-5">Option 5</option>
  <option value="option-6">Option 6</option>
</select>

To provide labels, you can use the <optgroup> element (with or without dividers):

<select>
  <optgroup label="Section 1">
  <option value="option-1">Option 1</option>
  <option value="option-2">Option 2</option>
  <option value="option-3">Option 3</option>
  </optgroup>
  <optgroup label="Section 2">
  <option value="option-4">Option 4</option>
  <option value="option-5">Option 5</option>
  <hr />
  <option value="option-6">Option 6</option>
  </optgroup>
</select>

Opting In to Native Select Styles

If you want to use the Native Select styles without including the entirety of Web Awesome Native Styles, you can include the following CSS files from the Web Awesome CDN.

In HTML In CSS

Add the following code to the <head> of your page:

<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-alpha.11/dist/styles/native/select.css" />

Add the following code at the top of your CSS file:

@import url('https://early.webawesome.com/webawesome@3.0.0-alpha.11/dist/styles/native/select.css');

To use all of Web Awesome Native styles, follow the instructions on the Native Styles overview page.

    No results