布尔玛选择图标

Bulma是一个开源 CSS 框架，可让您使用预定义的类来设置您的网站和 Web 应用程序的样式。在本文中，我们将了解如何在 Bulma 的选择下拉菜单中添加图标。

要将图标添加到选择下拉列表中，我们可以将选择容器包装在控件div 中，并在控件 div 上使用has-icons-left修饰符。我们还需要在图标容器上添加is-left修饰符。图标容器的大小将由选择下拉菜单的大小定义。

布尔玛选择图标类：

• has-icons-left：此类用于包含选择下拉列表的控件容器。
• is-left：该类用于图标容器。

句法：

 

   
     ....
     ...
     ...
   
 
 

   
 

下面的示例说明了 Bulma Select 图标：

示例：下面的示例显示了如何在 Bulma 的选择下拉列表中添加图标。

HTML

  

    
    
    

  

    

      GeeksforGeeks
    
    
Bulma Select Icons
    

        

            

                

                    

                        
                            
                              Select a topic
                            
                            Data Structures
                            Algorithms
                            DBMS
                        
                    
                    

                        
                    
                
            
  
            

                

                    

                        
                            
                              Select your age
                            
                            13
                            14
                            15
                            16
                            17
                            18
                            19
                        
                    
                    

                        
                    
                
            
  
            

                

                    

                        
                            
                              Select a tool
                            
                            Hammer
                            Wrench
                            Screwdriver
                        
                    
                    

                        
                    
                
            
        
    

  

输出：

参考： https://bulma.io/documentation/form/select/#with-icons