How to style the dropdowns pop up grouping with css

[Zachary]

I have an autocomplete that has grouping in the pop up. How can I style the grouping in the pop up drop down? I'm trying to change the font weight to bold.

[Berly Christopher]

Hi Zachary, 

  

Greetings from Syncfusion support. 

  

We can achieve the requested requirement by overriding the below CSS styles to the list item with help of cssClass property. 

  

<ejs-autocomplete 

id="vegetables" 

cssClass="e-custom" 

[showPopupButton]="true" 

[dataSource]="vegetableData" 

[placeholder]="groupWaterMark" 

[fields]="groupFields" 

></ejs-autocomplete> 

.e-custom .e-list-group-item { 

    font-weight: bold; 

  } 

 

  

Screenshot: 

 

  

Sample Link: https://stackblitz.com/edit/angular-mo6ajp?file=app.component.css  

  

Regards, 

Berly B.C 

[Zachary]

Worked perfectly! Thank you.

[Berly Christopher]

Hi Zachary, 

  

Most welcome. Please let us know if you need further assistance on this. 

  

Regards, 

Berly B.C