Blazor Input Type Datetime-local change calendar icon

Question

Is there a way that we can style the color of the calendar icon in an input datetime-local control?

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.

Answer 1

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;
}

Answer 2

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 class="date-container">
      <input type="datetime-local" class="form-control" />
      <span class="custom-button">
        <button type="button">
          <i class="bi bi-calendar4" style="color: cornflowerblue;"></i>
        </button>
      </span>
    </div>

You can see this code in blazorfiddle