Open In App
Related Articles

Bulma Select Colors

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

Bulma is a free, open-source CSS framework based on flexbox. It is component-rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design.

The Bulma select color is used to set the color on the select element. The color is applied on the border and dropdown icon of the select menu.

Bulma select colors classes:

  • is-primary: It is used to set the color of the select menu to light cyan.
  • is-link: It is used to set the color of the select menu to blue.
  • is-info: It is used to set the color of the select menu to light blue.
  • is-success: It is used to set the color of the select menu to green.
  • is-warning: It is used to set the color of the select menu to yellow.
  • is-danger: It is used to set the color of the select menu to red.

Syntax:

<div class="select is-primary">
     <select>
           <option> ... </option>
     </select>
</div>

Example: This example demonstrates Bulma select colors.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma Select Colors</title>
    <link rel='stylesheet'
          href=
</head>
  
<body class="has-text-centered">
    <h1 class="is-size-1 has-text-success">
        GeeksforGeeks
    </h1>
    <p class="is-size-3">Bulma Select Colors</p>
  
  
    <div class="container">
        <div class="select is-primary">
            <select>
                <option>Primary Color Select Menu</option>
                <option>HTML</option>
                <option>CSS</option>
                <option>JavaScript</option>
            </select>
        </div>
        <br><br>
  
        <div class="select is-link">
            <select>
                <option>Link Color Select Menu</option>
                <option>HTML</option>
                <option>CSS</option>
                <option>JavaScript</option>
            </select>
        </div>
        <br><br>
  
        <div class="select is-info">
            <select>
                <option>Info Color Select Menu</option>
                <option>HTML</option>
                <option>CSS</option>
                <option>JavaScript</option>
            </select>
        </div>
        <br><br>
  
        <div class="select is-success">
            <select>
                <option>Success Color Select Menu</option>
                <option>HTML</option>
                <option>CSS</option>
                <option>JavaScript</option>
            </select>
        </div>
        <br><br>
  
        <div class="select is-warning">
            <select>
                <option>Warning Color Select Menu</option>
                <option>HTML</option>
                <option>CSS</option>
                <option>JavaScript</option>
            </select>
        </div>
        <br><br>
  
        <div class="select is-danger">
            <select>
                <option>Danger Color Select Menu</option>
                <option>HTML</option>
                <option>CSS</option>
                <option>JavaScript</option>
            </select>
        </div>
    </div>
</body>
  
</html>

                    

Output:

Bulma Select Colors

Bulma Select Colors

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



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