Select
Classes Information
| ClassName | Description |
|---|---|
| select | Select base class |
| select-rounded | Set full rounded |
| select-block | Make select takes full width |
| select-sm | Set small size |
| select-lg | Set large size |
| select-primary | Set primary color |
| select-secondary | Set secondary color |
| select-success | Set success color |
| select-error | Set error color |
| select-warning | Set warning color |
| select-ghost-primary | Border hover primary |
| select-ghost-secondary | Border hover secondary |
| select-ghost-success | Border hover success |
| select-ghost-error | Border hover error |
| select-ghost-warning | Border hover warning |
Basic Usage
Example Code
html
<select class="select">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>Rounded
Example Code
html
<select class="select select-rounded">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>Block
Example Code
html
<select class="select select-block">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>Sizes
Example Code
html
<select class="select select-sm">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<select class="select">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<select class="select select-lg">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>Colors
Example Code
html
<select class="select">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<select class="select select-primary">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<select class="select select-secondary">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<select class="select select-success">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<select class="select select-error">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<select class="select select-warning">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>Ghost
Example Code
html
<select class="select select-ghost-primary">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<select class="select select-ghost-secondary">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<select class="select select-ghost-success">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<select class="select select-ghost-warning">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<select class="select select-ghost-error">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>Disabled
Example Code
html
<select class="select" disabled>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>