Bulma Select Colors

Last Updated : 20 Jan, 2022

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= 
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 
</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>