I just found the answer to my question on this post Inspect webkit-input-placeholder with developer tools

What I need to do is to enable ‘Show user agent shadow DOM’ in the Settings panel of Chrome Developer Tools. Now the properties are visible.

Try this

::-webkit-datetime-edit-ampm-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-millisecond-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-week-field,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-text {
   color:darkred;
}

It may be a solution for your problem, there you have everything that you are able to edit, hope it works!

I use the ::-webkit-datetime-edit CSS property in order to control the appearance of a date input field for webkit browsers. To do further debugging, I would like to inspect it in my dev tools.

But when I inspect my element with Chrome dev tools, I can’t see anywhere the css properties associated with ::-webkit-datetime-edit. Nor in the “Styles” panel or the “Computed” panel.

Here is my code:

<input type="date">

[type="date"]::-webkit-datetime-edit {
  background-color: red;
  color: transparent;
}

Here is a codepen: https://codepen.io/neiya/pen/jOERJQb

Is it possible to see and edit these properties with Chrome or other browser dev tools?