Bulma Select With Icons

Last Updated : 30 Jan, 2022

Bulma is an open-source CSS framework that lets you use predefined classes to style your website and web applications. In this article, we will be seeing how to add icons to the select dropdown in Bulma.

To add an icon to the select dropdown we can wrap the select container in a control div and use the has-icons-left modifier on the control div. We also need to add is-left modifier on the icon container. The size of the icon container will be defined by the size of the select dropdown.

Bulma Select Icon Classes:

has-icons-left: This class is used on the control container containing select dropdown.
is-left: This class is used on the icon container.

Syntax:

<div class="control has-icons-left">
 <div class="select">
   <select>
     <option selected>....</option>
     <option>...</option>
     ...
   </select>
 </div>
 <div class="icon is-left">
   <i class="fas fa-home"></i>
 </div>
</div>

Below example illustrate the Bulma Select icons:

Example: The below example shows how to add an icon to the select dropdown in Bulma.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel='stylesheet' 
          href= 
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> 
    <link rel="stylesheet" 
          href= 
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" /> 
    <style> 
        body { 
            display: flex; 
            flex-direction: column; 
            justify-content: center; 
        } 
  
        h1, 
        p { 
            text-align: center; 
        } 
  
        .container>form { 
            margin-top: 25px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 class="is-size-2 has-text-success"> 
      GeeksforGeeks 
    </h1> 
    <p><b>Bulma Select Icons</b></p> 
    <div class="container"> 
        <form> 
            <div class="field"> 
                <div class="control has-icons-left"> 
                    <div class="select"> 
                        <select> 
                            <option selected> 
                              Select a topic 
                            </option> 
                            <option>Data Structures</option> 
                            <option>Algorithms</option> 
                            <option>DBMS</option> 
                        </select> 
                    </div> 
                    <div class="icon is-left"> 
                        <i class="fas fa-list"></i> 
                    </div> 
                </div> 
            </div> 
  
            <div class="field"> 
                <div class="control has-icons-left"> 
                    <div class="select"> 
                        <select> 
                            <option selected> 
                              Select your age 
                            </option> 
                            <option>13</option> 
                            <option>14</option> 
                            <option>15</option> 
                            <option>16</option> 
                            <option>17</option> 
                            <option>18</option> 
                            <option>19</option> 
                        </select> 
                    </div> 
                    <div class="icon is-left"> 
                        <i class="fas fa-user"></i> 
                    </div> 
                </div> 
            </div> 
  
            <div class="field"> 
                <div class="control has-icons-left"> 
                    <div class="select"> 
                        <select> 
                            <option selected> 
                              Select a tool 
                            </option> 
                            <option>Hammer</option> 
                            <option>Wrench</option> 
                            <option>Screwdriver</option> 
                        </select> 
                    </div> 
                    <div class="icon is-left"> 
                        <i class="fas fa-tools"></i> 
                    </div> 
                </div> 
            </div> 
        </form> 
    </div> 
</body> 
  
</html>