Back to Snippets List

form - Form Select

<div class="form-group">
    <div class="form-select">
        <select name="address" id="address">
            <option value="13 Sample Street">13 Sample Street</option>
            <option value="14 Sample Street">14 Sample Street</option>
            <option value="15 Sample Street">15 Sample Street</option>
            <option value="16 Sample Street">16 Sample Street</option>
            <option value="17 Sample Street">17 Sample Street</option>
            <option value="18 Sample Street">18 Sample Street</option>
        </select>
        <span class="arrow"></span>
    </div>
</div>

<div class="form-group">
    <div class="form-select small">
        <select name="valid_from_year" id="valid_from_year">
            <option value="2005">2005</option>
            <option value="2006">2006</option>
            <option value="2007">2007</option>
            <option value="2008">2008</option>
            <option value="2009">2009</option>
            <option value="2010">2010</option>
            <option value="2011">2011</option>
            <option value="2012">2012</option>
            <option value="2013">2013</option>
            <option value="2014">2014</option>
            <option value="2015">2015</option>
        </select>
        <span class="arrow"></span>
    </div>
</div>


<div class="form-select-row">
    <div class="form-select small">
        <select>
            <option value="2005">2005</option>
            <option value="2005">2005</option>
        </select>
        <span class="arrow"></span>
    </div>
    <div class="form-select small">
        <select>
            <option value="2006">2006</option>
            <option value="2006">2006</option>
        </select>
        <span class="arrow"></span>
    </div>
</div>

Select Component

This component simply wraps a <select> in a div with a class of form-select, and applies the correct styling to match the style of text inputs.

<div class="form-select">
    <select>
        ...
    </select>
</div>

Avaliable sizes:

Name Class Description
Normal form-select The same width as <input type="text">
Small form-select small 120px wide, for areas like card details and dates

Note: For the arrow to show, you need to add <span class="arrow"></span> after the closing </select> tag.


If you want multiple select boxes on one line, wrap multiple <div class="form-select small">'s in a container called <div class="form-select-row">. It's mostly useful for forms that need a month & date selected, like a card details section on a billing form.

<div class="form-select-row">
    <div class="form-select small">
        <select>
            ...
        </select>
        <span class="arrow"></span>
    </div>
    <div class="form-select small">
        <select>
            ...
        </select>
        <span class="arrow"></span>
    </div>
</div>