Select
Use .select
to style your select
HTML Element.
The select input supports a normal size (.select
) and a small size (.select.select-small
)
html
<div class="form-group"> <label for="select-1">What do you want?</label> <select class="select" id="select-1"> <option value="1">Option one</option> <option value="2">Option two</option> <option value="3">Option three</option> <option value="4">Option four</option> </select> </div>
🏓 Interactive playground
html
<div class="form-group"> <label for="select-2">What do you want?</label> <select class="select select-small" id="select-2"> <option value="1">Option one</option> <option value="2">Option two</option> <option value="3">Option three</option> <option value="4">Option four</option> </select> </div>
🏓 Interactive playground
Just like text inputs, selects support disabled and decorations:
html
<div> <div class="form-group"> <label for="do-you-use-vcs">Do you use a VCS?</label> <div class="input-group"> <span class="input-decoration">Yes:</span> <select class="select" id="do-you-use-vcs"> <option value="">GitHub</option> <option value="">GitLab</option> <option value="">BitBucket</option> </select> </div> </div> <div class="form-group"> <label for="select-3">What do you want</label> <div class="form-group"> <select class="select" id="select-3" disabled> <option value="">Option 1</option> <option value="">Option 2</option> <option value="">Option 3</option> </select> </div> </div> </div>
🏓 Interactive playground