Combobox Appearance Styling

How can I change appearance styling for asp.net web form ComboBox (background color, font, etc..)?

1 Reply

KR Keerthana Rajendran Syncfusion Team March 14, 2018 05:54 AM UTC

Hi Taweesak,   
   
Thank you for contacting Syncfusion Support.   
   
You can change the appearance of ComboBox input element through cssClass property as shown below. You can use popup id and class names of list items for changing styles of popup.   
   
  <ej:ComboBox ID="countryList" runat="server"            
            AutoFill="true"   
             DataValueField="text" DataTextField="text"  CssClass="custom" Width="100%"  ClientSideOnSelect="select">   
   </ej:ComboBox>   
      
     <style type="text/css">   
          
       .custom.e-ddl .e-combobox.e-js.e-input{   
           background-color:mistyrose/*change background color for input box*/   
           font-size:20px;  /*set font for selected element in input*/   
           font-style:italic;   
        }   
       .custom.e-ddl .e-clear-icon   
       {   
            background-color:mistyrose;  /*background color for clear icon*/    
       }   
        #MainContent_countryList_popup > div > ul > li.e-list-item   
        {   
            font-size:20px;   /*change font for popup items*/   
        }   
       #MainContent_countryList_popup > div > ul > li.e-list-item.e-hover   
       {   
           background-color:lightcoral/*change background color for item during hover*/   
             
       }   
    </style>   
   
We have attached a sample for your reference which can be downloaded from the following link.   
   
   
Also, please have a look on the below link to know about theme studio through which you can build a new theme based on existing themes.    
   
   
Regards,   
Keerthana.   
 


Loader.
Up arrow icon