Search results

Style and Appearance in JavaScript (ES5) TimePicker control

30 Sep 2022 / 1 minute to read

The following content provides the exact CSS structure that can be used to modify the control’s appearance based on the user preference.

Customizing the appearance of TimePicker wrapper element

Use the following CSS to customize the appearance of wrapper element.

Copied to clipboard
/* To specify height and font size */
.e-input-group input.e-input, .e-input-group.e-control-wrapper input.e-input, .e-input-group textarea.e-input, .e-input-group.e-control-wrapper textarea.e-input {
        font-size: 20px;
        height: 40px;
}

Customizing the TimePicker icon element

Use the following CSS to customize the TimePicker icon element

Copied to clipboard
/* To specify background color and font size */
.e-time-wrapper .e-time-icon.e-icons, *.e-control-wrapper.e-time-wrapper .e-time-icon.e-icons {
        font-size: 20px;
        background-color: beige;
}

Customizing the TimePicker popup

Use the following CSS to customize the TimePicker popup

Copied to clipboard
/* To specify height */
.e-timepicker.e-popup {
        height: 100px;
}

Customizing the TimePicker popup content

Use the following CSS to customize the TimePicker popup content

Copied to clipboard
/* To specify height */
.e-timepicker.e-popup .e-list-parent.e-ul li.e-list-item {
        background-color: beige;
        font-size: 20px;
}