Open In App

Bulma Select States

Improve
Improve
Like Article
Like
Save
Share
Report

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:

Bulma Select States

Bulma Select States

Reference: https://bulma.io/documentation/form/select/#states



Last Updated : 20 Jan, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads