Rank 1
Iron
Iron
i need to change color of drop-down kendorreact drop-down component.
1. What are the css selectors for version 5.11.0 dropdown
2.Where to update and whats the recommended way to update values of css selectors If i am using it in a component for example test.js.
Should i create seperate test.css file and import in test.js .pls suggest best approach
I tried updating css selectors in index.html file but looks like its getting overwritten by selector from kendo theme default all.css configuration.
2 Answers, 1 is accepted
Hello, Darshan,
Customizing the CSS of our components can be done inside index.html or a separate CSS file that is then imported to the JavaScript file. In the below example, I customized the colors of the list items inside `index.html` where I am using `kendo-theme-default`.
I hope this helps. However, if you are still facing an issue with the styling, can you please modify the above example until the issue is reproducible and send it to us?
Regards,
Wissam
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Iron
Iron
Rank 1
Iron
Iron
basically i am facing the same issue as highlighted in
https://www.telerik.com/forums/kendo-react-dropdown-change-hover-color
But this solution is not working may be because of version difference ? I am using 5.11.0 dropdown
Hi, Darshan,
The responsible CSS class for the red background color when hovering above a selected item is `.k-list-item:hover.k-selected`. I modified the example as you requested and changed the red color to yellow:
I also checked the thread you sent. You are right, the reason why the CSS selectors mentioned there are not working is because major rendering changes were applied to the KendoReact components in version 5 where many classes were modified in version v5.3.0:
In addition, all the used class names of the DropDownList are available inside the kendo-themes repository. For example, in the below link, you can find all the class names of the List which is rendered inside the DropDownList. You can also inspect the component using Chrome DevTools or any other browser debugger to find the used classes on the go.
I hope this helps, but please let us know if you have any further questions.
Regards,
Wissam
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.