7 Answers, 1 is accepted
0
Hello, Parag,
The hover color of the DropDownList item can be changed via the following CSS rule:
The color of the selected element can be changed via the following CSS rule:
As the components have multiple selectors that can be overwritten we recommend inspecting the element to observe which is the element class and selector that has to be changed.
Regards,
Stefan
Progress Telerik
The hover color of the DropDownList item can be changed via the following CSS rule:
.k-list .k-item:hover { background-color: blue;}The color of the selected element can be changed via the following CSS rule:
.k-list .k-item.k-state-selected { background-color: blue; }As the components have multiple selectors that can be overwritten we recommend inspecting the element to observe which is the element class and selector that has to be changed.
Regards,
Stefan
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Parag
Top achievements
Rank 1
Rank 1
answered on 30 Aug 2018, 02:08 PM
Hi,
Thanks for the quick reply.
I wanted to know when I move the mouse cursor to selected item, the color becomes red something. Can you please tell me the class name for same. I have highlighted same in attached screenshot
0
Hello, Parag,
If I correctly understand the desired result is to change the color of the selected item that is hover?
If this is correct the CSS rule is the following:
This is an example:
https://stackblitz.com/edit/react-w4vbhx?file=index.html
If this is not the case, please describe it in more details, so I can provide the desired CSS selector.
Regards,
Stefan
Progress Telerik
If I correctly understand the desired result is to change the color of the selected item that is hover?
If this is correct the CSS rule is the following:
.k-list .k-item:hover.k-state-selected { color: white; background-color: blue}This is an example:
https://stackblitz.com/edit/react-w4vbhx?file=index.html
If this is not the case, please describe it in more details, so I can provide the desired CSS selector.
Regards,
Stefan
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Parag
Top achievements
Rank 1
Rank 1
answered on 31 Aug 2018, 03:43 PM
Hi,
currently when we clicked on dropdown, it will shows the list of values, if we hover then color becomes Blue and if we click the color becomes Red. I want to change this red color. Can you please tell me the class name for same.
There are two colors associated with the dropdown one is Red and other is blue. I want the class name for Red.
Regards,
Parag
0
Parag
Top achievements
Rank 1
Rank 1
answered on 31 Aug 2018, 03:48 PM
Thanks for the reply. Can you please let me know the location of file. I checked in kendo-theme-default as well as kendo-theme-bootstrap packages, but didn't found the above class.
0
Hello, Parag,
The selector in the theme is a little bit different as its cover other components as well.
When changing the appearance of the component we recommend placing the styles that will make the change in a separate file. This will ensure two things:
1) If the theme is updated, it will not be needed to go an make all of the changes again.
2) There will be one file containing all of the changes to the themes, so in case of something does not look right, this file can be used to identify if the strange behavior is due to a custom style instead of going through everything.
Still, if you wish to change the style directly inside the code, this is the selector:
Selected hover:
Selected:
Regards,
Stefan
Progress Telerik
The selector in the theme is a little bit different as its cover other components as well.
When changing the appearance of the component we recommend placing the styles that will make the change in a separate file. This will ensure two things:
1) If the theme is updated, it will not be needed to go an make all of the changes again.
2) There will be one file containing all of the changes to the themes, so in case of something does not look right, this file can be used to identify if the strange behavior is due to a custom style instead of going through everything.
Still, if you wish to change the style directly inside the code, this is the selector:
Selected hover:
.k-list-optionlabel:hover.k-state-selected,.k-list .k-item.k-state-hover.k-state-selected,.k-list .k-item:hover.k-state-selected { color: #fff; background-color: #ed5c52}Selected:
.k-list-container .k-button.k-state-active,.k-list-container .k-button:active,.k-list-optionlabel.k-state-selected,.k-list .k-item.k-state-selected,.k-menu-group .k-item.k-state-selected,.k-menu.k-context-menu .k-item.k-state-selected,.k-spreadsheet-popup .k-button.k-state-active,.k-spreadsheet-popup .k-button.k-state-selected,.k-spreadsheet-popup .k-button:active { color: #fff; background-color: #ff6358}Regards,
Stefan
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Darshan
commented on 13 Feb 2023, 01:06 PM
Top achievements
Rank 1
Iron
Iron
Rank 1
Iron
Iron
this is not working for me in version dropdown version 5.11.0.
are the css seleectors changed .
Vessy
commented on 14 Feb 2023, 05:59 PM
Telerik team
Hi, Darshan, your assumption is correct - we introduced a lot of rendering improvements lately and in order to apply the same styling with in the latest version of the components, you will need to change it like follows:
.k-list .k-list-item:hover.k-selected {
color: white;
background-color: blue;
}
.k-list .k-list-item.k-selected,
.k-list .k-selected.k-list-optionlabel {
color: #fff;
background-color: #ed5c52;
}
.k-list .k-list-item:hover,
.k-list .k-list-optionlabel:hover,
.k-list .k-list-item.k-hover,
.k-list .k-hover.k-list-optionlabel {
color: #fff;
background-color: #ff6358;
}0
Parag
Top achievements
Rank 1
Rank 1
answered on 05 Sep 2018, 12:46 AM
Thanks for quick reply, I tried and it is working.