Bulma Select Styles

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.

Bulma select style is used to set the style on the select elements. There is only a single style that is used in the select element. This style is used to create a rounded corner on the select element.

Bulma Select Style Class:

is-rounded: It is used to set the rounded corner style on the select element.

Syntax:

<div class="select is-rounded">
  <select>
    <option>option 1</option>
    <option>option 2</option>
  </select>
</div>

Example: This example demonstrates the Bulma select style class.

HTML

<!DOCTYPE html> 

<html> 

<head> 

    <title>Bulma Select Styles</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 Styles</p> 

    <div class="container"> 

        <div class="select"> 

            <select> 

              <option>Default Select Style</option> 

              <option>HTML</option> 

              <option>CSS</option> 

              <option>JavaScript</option> 

            </select> 

          </div> 

        <br><br> 

        <div class="select is-rounded"> 

            <select> 

                <option>Rounded Select Style</option> 

                <option>HTML</option> 

                <option>CSS</option> 

                <option>JavaScript</option> 

              </select> 

        </div> 

    </div> 

</body> 

</html>

Output:

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

Article Tags :

CSS

Web Technologies

Bulma

Bulma-Form