CSS Customization in Blazor TimePicker Component

9 Jan 20243 minutes to read

TimePicker allows to customize the text box and popup list appearance to suit the application by using the CssClass property.

The following code demonstrates customization of text appearance in a text box, popup button, and popup list along with hover and active state by using the e-custom-style class. Following is the list of available classes used to customize the entire TimePicker component:

Class Name	Description
e-time-wrapper	Applied to TimePicker wrapper element.
e-timepicker	Applied to input element and TimePicker popup element.
e-time-wrapper.e-timepicker	Applied to input element only.
e-input-group-icon.e-time-icon	Applied to popup button.
e-float-text	Applied to floating label text element.
e-popup	Applied to popup element.
e-timepicker.e-popup	Applied to TimePicker popup element only.
e-list-parent	Applied to popup UL element.
e-timepicker.e-list-parent	Applied to TimePicker popup UL element only.
e-list-item	Applied to LI elements.
e-hover	Applied to LI element hovering time.
e-active	Applied to active LI element.

@using Syncfusion.Blazor.Calendars

<SfTimePicker TValue="DateTime?" CssClass="e-custom-style" Placeholder="Select a Time"></SfTimePicker>

<style>
     /*customize the input element text color*/
    .e-time-wrapper.e-custom-style #element {
        display: block;
        color: blue;
    }

    /*customize the floating label and popup button text color*/
    .e-time-wrapper.e-custom-style .e-float-text.e-label-bottom,
    .e-time-wrapper.e-custom-style .e-input-group-icon.e-time-icon.e-icons {
        color: blue;
    }

    /*customize the input element text selection*/
    .e-time-wrapper.e-custom-style.e-input-group::before,
    .e-time-wrapper.e-custom-style.e-input-group::after,
    .e-time-wrapper.e-custom-style.e-input-group .e-timepicker::selection {
        background: blue;
    }


    .e-timepicker.e-popup.e-custom-style .e-list-parent.e-ul,
    .e-timepicker.e-popup.e-custom-style .e-list-parent.e-ul .e-list-item {
        background-color: #c0ebff;
    }

        /*customize the list item hover color*/
    .e-timepicker.e-popup.e-custom-style .e-list-parent.e-ul .e-list-item.e-hover,
    .e-timepicker.e-popup.e-custom-style .e-list-parent.e-ul .e-list-item.e-active.e-hover {
        background-color: blue;
        color: #fff;
    }

        /*customize the active element text color*/
    .e-timepicker.e-popup.e-custom-style .e-list-parent.e-ul .e-list-item.e-active {
        color: #333;
        background-color: #fff;
    }
</style>