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 =
< style >
.container>div {
margin-top: 25px;
}
</ style >
</ head >
< body class = "has-text-centered" >
< h1 class = "is-size-2 has-text-success" >
GeeksforGeeks
</ 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