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">
      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

Explore