1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Custom mdb-select field

Garzon pro asked 7 years ago

Hello guys,

Please help me, I've tried to figure out without success, how to custom a mdb-select field. I want to modify the font-size and color elements for the options elements.

Thanks in advance

C

Garzon pro answered 7 years ago

Hello

Coming back to this question, answer provided only modify the internal options of the select element. In order to modify the initial default value you can use something like:

input.select-dropdown[readonly="true"] { 
font-size: .9rem;
color: rgb(109, 110, 101);
}


 


                    
                      

                    
                    
                    

                      
                      
                        
                        
                          
                          
                          
                            

                              Jakub Mandra
                              staff
                              commented 7 years ago
                              
                            

                            Thanks for submit :) 
Of course there are few ways to achieve that, your solution has higher specificity (so it is overall more precise).

Keep hacking! :) 
Jakub from MDB
                          
                          
                          
                        
                      
                      
                        
                          

                        
                        

                          
                            
                          
                        

                      
                    

                    
                  

                  
                

                
              
                
                
                

                  
                  

                    

                      
                      Marta Wierzbicka
                      free
                        answered 7 years ago
                    

                    
                  


                  


                  
                  
                  

                    Hi,

use this CSS code to change styles of mdb-select:
.dropdown-content li>a, 
 .dropdown-content li>span {
 font-size: .9rem;
 color: #4285F4;
 }

Best,
Marta
                    
                      

                    
                    
                    

                      
                      
                        
                        
                          
                          
                          
                            

                              Garzon
                              pro
                              commented 7 years ago
                              
                            

                            Thanks a lot Marta!
                          
                          
                          
                        
                      
                      
                        
                          

                        
                        

                          
                            
                          
                        

                      
                    

                    
                  

                  
                

                
              
            
            
              
              

                
                

                  

  
  
  
  


                

                
                
                

                  
Write

                  
                     Create snippet
                  
                

                

                
                

                  

                    
                    

                      
                      
                      

                      

                        Please insert min. 20 characters.
                      

                      

                        
                          
                        
                      

                    

                  

                

                
              

              
            
          

          
          
          


            

  
  

    

      
FREE CONSULTATION

      
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

    

  

  





  

    

      
      
      
      
      
    

  

  
  

  




            
            

              
              
Status

              

              
              

                

                  

                    
                    Answered
                  

                  
                

                
              

            

            

            
            
            

              
              
Specification of the issue

              

              

                
    
                  
  • 
                    ForumUser:
                    
                      Pro
                    
                  
    • 
                  
  • 
                    Premium support:
                    
                      No
                    
                  
    • 
                  
  • 
                    Technology:
                    
                      General Bootstrap questions
                    
                  
    • 
                  
  • 
                    MDB Version:
                    
                      -
                    
                  
    • 
                  
  • 
                    Device:
                    
                      -
                    
                  
    • 
                  
  • 
                    Browser:
                    
                      -
                    
                  
    • 
                  
  • 
                    OS:
                    
                      -
                    
                  
    • 
                  
  • 
                    Provided sample code:
                    
                      No
                    
                  
    • 
                  
  • 
                    Provided link:
                    
                      No
                    
                  
    • 
                

              

              

              
              
                
                

                  
                  
Tags

                  

                  
                  

                    
                  

                

                
              

              
              
                
                

                  
                  
About author

                  

                  
                  

                    
                  

                  

                    
                    

                      
                        Garzon
                      
                    

                    
                    
                    Pro User
                    
                    

                    
                    
                      15Support score
                    
                    

                    
                      2Questions
                    
                    
                      2Answers
                    

                    
                    
                      0Snippets