Get boba!
boba Version 1.7.2

Selects

Selects let users choose from predefined options.
<form class="form-control" action="#" method="post">
    <div>
        <label class="select-label" for="questions"> Default </label>
        <span class="select-icon">
            <select name="">
                <option value="Option 1"> Action </option>
                <option value="Option 2"> Second Action </option>
                <option value="Option 3"> Last Option </option>
            </select>
        </span>
    </div>
</form>

Sizes

Selects can be resized.



<form class="form-control" action="#" method="post">
    <div>
        <label class="select-label" for="questions"> Small Select </label>
        <span class="select-icon">
            <select class="small" name="">
                <option value="Option 1"> Action </option>
                <option value="Option 2"> Second Action </option>
                <option value="Option 3"> Last Option </option>
            </select>
        </span>
    </div>
    <br />
    <div>
        <label class="select-label" for="questions"> Default Select </label>
        <span class="select-icon">
            <select name="">
                ...
            </select>
        </span>
    </div>
    <br />
    <div>
        <label class="select-label" for="questions"> Medium Select </label>
        <span class="select-icon">
            <select class="medium" name="">
                ...
            </select>
        </span>
    </div>
    <br />
    <div>
        <label class="select-label" for="questions"> Large Select </label>
        <span class="select-icon">
            <select class="large" name="">
                ...
            </select>
        </span>
    </div>
</form>

Styles

Easily change the look of your selects to better suit your needs.

Rounded

Selects can be pill-shaped.


<form class="form-control" action="#" method="post">
    <div>
        <label class="select-label" for="questions">Default Rounded Select</label>
        <span class="select-icon">
            <select class="rounded green" name="">
                <option value="Option 1">Option</option>
                <option value="Option 2">Second Option</option>
                <option value="Option 3">Last Option</option>
            </select>
        </span>
    </div>
    <br />
    <div>
        <label class="select-label" for="questions">Red Rounded Select</label>
        <span class="select-icon">
            <select class="rounded red" name="">
                ...
            </select>
        </span>
    </div>
    <br />
    <div>
        <label class="select-label" for="questions">Green Rounded Select</label>
        <span class="select-icon">
            <select class="rounded green" name="">
                ...
            </select>
        </span>
    </div>
</form>

States

Selects can be disabled using the disabled attribute.


<form class="form-control" action="#" method="post">
    <div>
        <label class="select-label" for="questions"> Disabled Select </label>
        <span class="select-icon">
            <select disabled name="">
                <option value="Option 1"> Action </option>
                <option value="Option 2"> Second Action </option>
                <option value="Option 3"> Last Option </option>
            </select>
        </span>
    </div>
    <br />
    <div>
        <label class="select-label" for="questions">Red, Rounded, Disabled Select</label>
        <span class="select-icon">
            <select disabled class="rounded red" name="">
                ...
            </select>
        </span>
    </div>
    <br />
    <div>
        <label class="select-label" for="questions">Green, Rounded, Disabled Select</label>
        <span class="select-icon">
            <select disabled class="rounded green" name="">
                ...
            </select>
        </span>
    </div>
</form>

Colors

Change the outline color of your selects using boba's refreshing color palette.








<form class="form-control" action="#" method="post">
    <div>
        <label class="select-label text-green" for="questions"> Green Select</label>
        <span class="select-icon">
            <select class="green" name="">
                <option value="Option 1"> First Option </option>
                <option value="Option 2"> Second Option </option>
                <option value="Option 3"> Last Option </option>
            </select>
        </span>
    </div>
</form>