The following content provides the exact CSS structure that can be used to modify the control’s appearance based on the user preference.
Use the following CSS to customize the appearance of wrapper element.
/* 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;
}Use the following CSS to customize the TimePicker icon element
/* 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;
}Use the following CSS to customize the TimePicker popup
/* To specify height */
.e-timepicker.e-popup {
height: 100px;
}Use the following CSS to customize the TimePicker popup content
/* To specify height */
.e-timepicker.e-popup .e-list-parent.e-ul li.e-list-item {
background-color: beige;
font-size: 20px;
}