Style and Appearance in Blazor TimePicker

27 Aug 20262 minutes 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 the Blazor TimePicker container element

Use the following CSS to customize the appearance of the Blazor 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 Blazor TimePicker icon element

Use the following CSS to customize the Blazor 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 Blazor TimePicker popup

Use the following CSS to customize the Blazor TimePicker popup.

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

Customizing the Blazor TimePicker popup content

Use the following CSS to customize the Blazor 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;
}

Full screen mode support on mobile devices

The Blazor TimePicker’s full-screen mode displays the popup element in full screen on mobile devices for better visibility and usability. This feature is available on mobile devices only and works in both landscape and portrait orientations. To enable it, set the FullScreen property to true; the popup will then expand to occupy the entire screen on supported mobile devices.

@using Syncfusion.Blazor.Calendars

<SfTimePicker TValue="DateTime?" FullScreen="true"></SfTimePicker>

TimePickerFullScreen

See also