multiselect search field css customization

[Eimantas Baigys]

Hello, i need to style search box for multiselect compoment which has checkbox mode

I cannot use developer tools to identify classes because compoment is rendered always on click and dissapears if I try to inspect it using developer tools.

Any ideas how I can add some custom styling?

[Priyanka Karthikeyan]

Hi Eimantas Baigys,

We have created a sample to achieve your requirement using CssClass property. Please find the code snippet and sample attached for your reference.  

<SfMultiSelect  TItem="Country" TValue="string[]" CssClass="e-custom" Placeholder="e.g. Australia" AllowFiltering="true" ShowSelectAll=true SelectAllText="Select All" UnSelectAllText="unSelect All" Mode="VisualMode.CheckBox" DataSource="@Countries">

.....

</SfMultiSelect>

<style>

    .e-custom.e-ddl.e-popup .e-filter-parent .e-input-group,.e-custom.e-ddl.e-popup .e-filter-parent{

        background: blue;

    }

</style>

 

Sample: https://blazorplayground.syncfusion.com/embed/VXBUNbKZeLzvjOCJ?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

 API Reference: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_CssClass

If you need any further assistance, Please let us know. We are happy to assist you further.

Regards,

Priyanka K