Input type date and input type time do not show browser picker on mouse click

[kvetoslavnovak]

input type="date" and input type="time" do not work on click to show default browser picker. Only small part of the input reacts to the mouse click as shown in the pictures bellow. (Chrome, Pop!_OS) It looks like you are covering the default clickable icons over with your own so pickers are not accessible. Flowing brief check of pico.css I guess the error is because you are probably using this rather disputable pattern to use your own icons:

input[type="date"]::-webkit-calendar-picker-indicator {
   ...
   background-image: var(--icon-date);
   ...
}

But probably better and following accessibility rules may be this solution:

input[type="date"]::-webkit-calendar-picker-indicator {
   ...
   background: var(--icon-date) no-repeat;
   ...
}

This way you can literary swap the default icons with your owns instead of "covering" them over and making them inaccessible..

[jubishop]

Thanks for raising this I noticed this today too

[lucaslarroche]

Hi @kvetoslavnovak,

Is #110 the same issue?

I believe it's fixed here. Can you check on this page: https://picocss.github.io/pico/docs/forms.html

[lucaslarroche]

input[type="date"]::-webkit-calendar-picker-indicator {
   ...
   background: var(--icon-date) no-repeat;
   ...
}

That would impact only Chrome.

[kvetoslavnovak]

Hi, I have checked the page and there it is working correctly. Great job, Thank you very much.