Style and appearance in Blazor TimePicker Component
21 Feb 20221 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 container element
Use the following CSS to customize the appearance of TimePicker container 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;
}
Customizing the TimePicker icon element
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;
}
Customizing the TimePicker popup
Use the following CSS to customize the TimePicker popup
/* To specify height */
.e-timepicker.e-popup {
height: 100px;
}
Customizing the TimePicker popup content
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;
}