Open In App

Bulma Select Styles

Improve
Improve
Like Article
Like
Save
Share
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.

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



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