Change SFComboBox style

Hello

I am trying to change style for a SfComboBox. I could change font size of selected item, but could not for the combobox list itself. So, I have couple of questions:

  1. How to change font style for Combobox list of items?
  2. My current App is using also Bootstrap 4 for some pure HTML components. Is there any way to apply some style from Bootstrap 4 like "form-control" class to a SfCombo? I tried using HtmlAttributes as well as CssClass, but the SfCombo box had a weird behavior. It could not render successfully.

Thanks
Kleber



That is the style code I am using :

    .e-input, textarea.e-input, .e-input-group, .e-input-group.e-control-wrapper {

    font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";

    font-size: 20px;

    font-weight: 300;

    }


1 Reply

SP Sureshkumar P Syncfusion Team July 19, 2022 08:44 AM UTC

Hi Kleber,

Query 1: How to change font style for Combobox list of items?

We suggest you referring the below style customization documentation to achieve your requirement.

Find the documentation here: https://blazor.syncfusion.com/documentation/combobox/style#customizing-the-background-color-of-focus-hover-and-active-items

Query 2: My current App is using also Bootstrap 4 for some pure HTML components. Is there any way to apply some style from Bootstrap 4 like "form-control" class to a SfCombo? I tried using HtmlAttributes as well as CssClass, but the SfCombo box had a weird behavior. It could not render successfully.

We suggest you use our default bootstrap theme to achieve all your required bootstrap behavior. Also please refer to the below styles and appearance customization documentation section to resolve your faced issues.

Find the documentation: https://blazor.syncfusion.com/documentation/combobox/style

Regards,

Sureshkumar P


Loader.
Up arrow icon