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