Washington State Auditor's Office Communication and Design System

Dropdown 

<select class="c-dropdown ">
    <option value="">-- Select an option --</option>
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
    <option value="four">Four</option>
    
</select>
 
<select class="c-dropdown {% if inverted === 'true' %} c-dropdown--inverted {% endif %}">
    <option value="">-- Select an option --</option>
    {% for option in options -%}
    <option value="{{ option | lower }}">{{ option }}</option>
    {% endfor %}
</select>
 
{
  "options": [
    "One",
    "Two",
    "Three",
    "Four"
  ],
  "inverted": "false"
}
  • Content: 
    .c-dropdown {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: $spacing-tiny $spacing-large $spacing-tiny $spacing-small;
    background-color: $color-neutral-lightest;
    background-image: url('/assets/images/dropdown-arrow.svg');
    background-repeat: no-repeat;
    background-position: right;
    border: $border-width-base solid $color-neutral-lightest;
    border-radius: $border-radius-base;
    width: 100%;

    &:focus {
        border-color: $color-neutral-light;
        outline: none;
    }

    &--inverted {
        color: $color-neutral-white;
        background-color: $color-neutral-base;
        border-color: $color-neutral-lighter;
    }

    // Fix for IE
    &::-ms-expand {
        display: none;
    }
}

// Fix for IE 9
@media screen and (min-width:0\0) {
    .c-dropdown {
        background: none\9;
        padding: 5px\9;
    }
}
  • URL: /components/raw/dropdown/dropdown.scss
  • Filesystem Path: src/Components/dropdown/dropdown.scss
  • Size: 942 Bytes

When used

Selecting a single option from a short list of options