1

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?

neiya
  • 2,657
  • 4
  • 23
  • 32

2 Answers2

5

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.

neiya
  • 2,657
  • 4
  • 23
  • 32
3

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!

h0merr
  • 182
  • 1
  • 9
  • Thanks for your answer but unfortunatly this doesn't help, I can't see these properties neither in the inspector – neiya Jan 28 '20 at 14:17