Bulma Select States
Bulma is an open-source CSS framework used to make fast and responsive websites. Bulma Select State classes are used to style the select dropdown according to a specific state. Using Bulma state classes we can style the select element like if it is being hovered or is in focus without triggering that state.
Bulma Select State Classes:
- is-hovered: This class is used to style the select dropdown as if it is being hovered.
- is-focused: This class is used to style the select dropdown as if it is in focus.
- is-active: This class is used to style the select dropdown as if it is in an active state.
- is-loading: This class adds a circular progress bar inside the select element.
Syntax:
<div class="select"> <select class="is-focused"> <option>Algorithms</option> <option>DBMS</option> </select> </div>
Example: The below example uses the is-hovered, is-focused, is-active, and is-loading classes to style the select dropdown.
HTML
<!DOCTYPE html> < html > < head > < title >Bulma Select States</ title > < link rel = 'stylesheet' href = 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css' > < style > .container>div { margin-top: 25px; } </ style > </ head > < body class = "has-text-centered" > < h1 class = "is-size-2 has-text-success" > w3wiki </ h1 > < b >Bulma Select States</ b > < div class = "container" > < div > < span >Normal State:</ span > < div class = "select" > < select > < option selected>Select dropdown</ option > < option >Data Structures</ option > < option >Algorithms</ option > < option >DBMS</ option > </ select > </ div > </ div > < div > < span >Hovered State:</ span > < div class = "select" > < select class = "is-hovered" > < option selected>Select dropdown</ option > < option >Data Structures</ option > < option >Algorithms</ option > < option >DBMS</ option > </ select > </ div > </ div > < div > < span >Focused State:</ span > < div class = "select" > < select class = "is-focused" > < option selected>Select dropdown</ option > < option >Data Structures</ option > < option >Algorithms</ option > < option >DBMS</ option > </ select > </ div > </ div > < div > < span >Active State: </ span > < div class = "select" > < select class = "is-active" > < option selected>Select dropdown</ option > < option >Data Structures</ option > < option >Algorithms</ option > < option >DBMS</ option > </ select > </ div > </ div > < div > < span >Loading State: </ span > < div class = "select is-loading" > < select > < option selected>Select dropdown</ option > < option >Data Structures</ option > < option >Algorithms</ option > < option >DBMS</ option > </ select > </ div > </ div > </ div > </ body > </ html > |
Output:
Reference: https://bulma.io/documentation/form/select/#states