Blazor Input Type Datetime-local change calendar icon-CodePudding

The

Im wanting to change it to a lighter color so that when we change the theming to dark mode it doesn't get lost in the background.

CodePudding user response：

You can use bootstrap:
Style:

.date-container { position: relative; float: left; } .custom-button { position: absolute; top: 10px; right: 11px; width: 25px; height: 25px; background: #fff; pointer-events: none; } .custom-button button { border: none; background: transparent; }

your custom component:

<div > <input type="datetime-local" /> <span > <button type="button"> <i style="color: cornflowerblue;"></i> </button> </span> </div>

You can see this code in blazorfiddle

CodePudding user response：

Use the following CSS to customize the appearance of Datetime Picker container element.

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

Use the following CSS to customize the Datetime Picker icons element.

/* To specify background color and font size */ .e-datetime-wrapper .e-input-group-icon.e-date-icon, .e-datetime-wrapper .e-input-group-icon.e-time-icon { font-size: 16px; background-color: blanchedalmond; }

Use the following CSS to customize the time picker popup in the Datetime Picker.

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

Use the following CSS to customize the time picker popup in the Datetime Picker.

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

Use the following CSS to customize the background color and border for the Calendar.

/* To specify background color and border */ .e-calendar { background-color: peachpuff; border: 3px solid red; }

Use the following CSS to customize the date elements on hovering in the Calendar.

/* To specify background color, color, and border */ .e-calendar .e-content td:hover span.e-day, .e-calendar .e-content td:focus span.e-day, .e-bigger.e-small .e-calendar .e-content td:hover span.e-day, .e-bigger.e-small .e-calendar .e-content td:focus span.e-day { background-color: red; border: 2px solid; color: #212529; }

Use the following CSS to add the border to the date cell grid.

/* To specify border */ .e-calendar .e-content span.e-day, .e-bigger.e-small .e-calendar .e-content span.e-day { border: 1px solid; }

Use the following CSS to customize the Calendar title.

/* To specify color and font size */ .e-calendar .e-header .e-title, .e-bigger.e-small .e-calendar .e-header .e-title { color: black; font-size: 20px; }

Use the following CSS to customize the previous and next icon.

/* To specify color and border */ .e-calendar .e-header span, .e-bigger.e-small .e-calendar .e-header span { border: 1px solid; color: chocolate; }

Use the following CSS to customize the footer button.

/* To specify background color, color, and border-color */ .e-calendar .e-btn.e-today.e-flat.e-primary, .e-calendar .e-css.e-btn.e-today.e-flat.e-primary { background-color: red; border-color: black; color: black; }

Use the following CSS to customize the selected date cell grid in Calendar.

/* To specify background color and color */ .e-calendar .e-content td.e-selected.e-focused-date span.e-day { background-color: maroon; color: #fff; }

Use the following CSS to customize the content header in Calendar.

/* To specify background */ .e-calendar .e-content thead, .e-bigger.e-small .e-calendar .e-content thead { background: aquamarine; }