Solution 1 :

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.

Solution 2 :

Try this

::-webkit-datetime-edit-text {

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

Problem :

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:

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


Comment posted by neiya

Thanks for your answer but unfortunatly this doesn’t help, I can’t see these properties neither in the inspector