CSS Components and Styleguide

Selects

Examples

Default styling

Select Costume Color Scheme

.select--full-width

Gives the select the width of its container.

Select Costume Color Scheme

.select--inline

Allows the select to be on the same line as other elements.

Select Costume Color Scheme

Markup: forms/forms-select.html

                    <label class="label" for="[modifier class]a">Select Costume Color Scheme</label>
<select class="select [modifier class]" id="[modifier class]a">
    <optgroup label="Standard">
        <option value="rnb">Red and Blue</option>
        <option value="bng">Black and Grey</option>
    </optgroup>
    <optgroup label="Screaming For Attention">
        <option value="hp">Hot Pink</option>
        <option value="ny">Neon Yellow</option>
    </optgroup>
</select>

Source: forms/_forms.scss, line 139