Change ListBox Style

Hi,

i am struggling to change the listbox control style for selected items. I want to change the background and font color for selected items and background and font color for selected items on hover over.


Could you please provide me an code snippet for how to archive this? I didn't find an example in the documentation for changing the style on the listbox control.


Thanks in advance!


Best regards,


Michel


1 Reply

TS Thaneegairaj Sankar Syncfusion Team November 29, 2021 02:28 PM UTC

Hi Michel,


Thank you for contacting Syncfusion support.


We have checked your reported query and we can be able achieve your requirement by using “.e-list-item.e-selected” for selected items and “li.e-selected:hover” for hover selected items.


Please find the below CSS styles,


.e-listbox-container .e-list-item.e-selected { // for selected item

        background-color: #edbeb0 !important;

        color: black;

    }

 .e-listbox-container li.e-selected:hover { // for selected hover

            background-color: #ed5d32 !important;

        color: black;

        }


For your reference we have prepared a sample,


Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Server5.0-14174509651464849024


UG Link: https://blazor.syncfusion.com/documentation/listbox/style-and-appearance


Please get back to us if you need further assistance.


Regards, 

Thaneegairaj S


Loader.
Up arrow icon