Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas.
<div class="select">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>
<div class="select is-rounded">
<select>
<option>Rounded dropdown</option>
<option>With options</option>
</select>
</div>
<div class="control">
<div class="select is-loading">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>
</div>
<div class="field">
<div class="control has-icons-left">
<div class="select">
<select>
<option selected>Country</option>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>
<div class="icon is-small is-left">
<i class="fas fa-globe"></i>
</div>
</div>
</div>
You can style a
multiple select dropdown, by using the is-multiple
modifier, and by using the multiple
HTML attribute.
<div class="select is-multiple">
<select multiple size="8">
<option value="Argentina">Argentina</option>
<option value="Bolivia">Bolivia</option>
<option value="Brazil">Brazil</option>
<option value="Chile">Chile</option>
<option value="Colombia">Colombia</option>
<option value="Ecuador">Ecuador</option>
<option value="Guyana">Guyana</option>
<option value="Paraguay">Paraguay</option>
<option value="Peru">Peru</option>
<option value="Suriname">Suriname</option>
<option value="Uruguay">Uruguay</option>
<option value="Venezuela">Venezuela</option>
</select>
</div>
<div class="field">
<div class="control">
<div class="select is-primary">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>
</div>
</div>
<div class="field">
<div class="control">
<div class="select is-info">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>
</div>
</div>
<div class="field">
<div class="control">
<div class="select is-success">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>
</div>
</div>
<div class="field">
<div class="control">
<div class="select is-warning">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>
</div>
</div>
<div class="field">
<div class="control">
<div class="select is-danger">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</div>
</div>
</div>
Niche Templates