<select class="select">
<option>Select dropdown</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
select.select
option Select dropdown
option Option 1
option Option 2
option Option 3
<select class="select is-tiny">
<option>is-tiny</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
<select class="select is-small">
<option>is-small</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
<select class="select is-normal">
<option>is-normal</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
<select class="select is-large">
<option>is-large</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
<select class="select is-massive">
<option>is-massive</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
select.select.is-tiny
option is-tiny
option Option 1
option Option 2
select.select.is-small
option is-small
option Option 1
option Option 2
select.select.is-normal
option is-normal
option Option 1
option Option 2
select.select.is-large
option is-large
option Option 1
option Option 2
select.select.is-massive
option is-massive
option Option 1
option Option 2
<select class="select is-primary">
<option>Select dropdown</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
<select class="select is-secondary">
<option>Select dropdown</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
<select class="select is-info">
<option>Select dropdown</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
<select class="select is-success">
<option>Select dropdown</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
<select class="select is-warning">
<option>Select dropdown</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
<select class="select is-danger">
<option>Select dropdown</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
<select class="select is-black">
<option>Select dropdown</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
<select class="select is-white">
<option>Select dropdown</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
select.select.is-primary
option Select dropdown
option Option 1
option Option 2
select.select.is-secondary
option Select dropdown
option Option 1
option Option 2
select.select.is-info
option Select dropdown
option Option 1
option Option 2
select.select.is-success
option Select dropdown
option Option 1
option Option 2
select.select.is-warning
option Select dropdown
option Option 1
option Option 2
select.select.is-danger
option Select dropdown
option Option 1
option Option 2
select.select.is-black
option Select dropdown
option Option 1
option Option 2
select.select.is-white
option Select dropdown
option Option 1
option Option 2
<select class="select is-primary is-rounded">
<option>Select dropdown</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
<select class="select is-secondary is-rounded">
<option>Select dropdown</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
<select class="select is-info is-rounded">
<option>Select dropdown</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
<select class="select is-success is-rounded">
<option>Select dropdown</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
<select class="select is-warning is-rounded">
<option>Select dropdown</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
<select class="select is-danger is-rounded">
<option>Select dropdown</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
<select class="select is-black is-rounded">
<option>Select dropdown</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
<select class="select is-white is-rounded">
<option>Select dropdown</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
select.select.is-primary.is-rounded
option Select dropdown
option Option 1
option Option 2
select.select.is-secondary.is-rounded
option Select dropdown
option Option 1
option Option 2
select.select.is-info.is-rounded
option Select dropdown
option Option 1
option Option 2
select.select.is-success.is-rounded
option Select dropdown
option Option 1
option Option 2
select.select.is-warning.is-rounded
option Select dropdown
option Option 1
option Option 2
select.select.is-danger.is-rounded
option Select dropdown
option Option 1
option Option 2
select.select.is-black.is-rounded
option Select dropdown
option Option 1
option Option 2
select.select.is-white.is-rounded
option Select dropdown
option Option 1
option Option 2
<select class="select is-disabled">
<option>Select dropdown</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
select.select.is-disabled
option Select dropdown
option Option 1
option Option 2
Modifier | Description | Class |
---|---|---|
Color | indicates the element state | .is-black .is-white .is-primary .is-secondary .is-info .is-success .is-warning .is-danger |
Size | changes the element size based on font-size | .is-tiny .is-small .is-normal .is-large .is-massive |
Rounded | add rounded corners to a select | .is-rounded |
Disabled | indicates that the input is disabled | .is-disabled |
You can extend the select component features by adding the Select extension.