Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Bulma Select Styles

  • 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.

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=
</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:

Bulma Select Styles

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!