Change Kendo UI Timepicker Highlighted Text Color

Question

How we can change the highlighted text color area in kendo ui time picker.

KENDO UI TIMEPICKER - https://www.telerik.com/kendo-angular-ui/components/dateinputs/timepicker/

As you see in this image, 10:30 AM is the highlighted area. I want to change the color of that time to red.

I did lots of research but didn't find any solution for this, i saw the html bellow somewhat it look like.

Found that if we change color of class <span class="k-time-highlight"></span> only background changes not text.

This link is extracted code - https://silver-ranique-14.tiiny.site/

Answer 1

.k-time-highlight only references a span that sits on top of the items. The DOM that actually gets created when you open the TimePicker is (truncated for brevity):

• <kendo-popup>
  • <div class="k-popup">
    • <kendo-timeselector>
      • <k-time-list-container>
        • <span class="k-time-highlight"> (the overlay that indicates selected item)
        • <div class="k-time-list-wrapper"> (for hours)
        • <div class="k-time-separator"> (separator)
        • <div class="k-time-list-wrapper"> (for minutes)
        • <div class="k-time-separator"> (separator)
        • <div class="k-time-list-wrapper"> (for AM/PM)

And each k-time-list-wrapper has the following:

• <kendo-timelist>
  • <kendo-virtualization>
    • <ul>
      • <li class="k-item"> (repeated for each value, e.g. hours 1 - 23)

Unfortunately, I don't think you're able to style the <li class="k-item"> that appears under the <span class="k-time-highlight"> because there is no context that indicates when it is under the overlay.