Hide the icon on a HTML time input field in Chrome

Question

In Chrome when you type="time" property to an input box you get a little icon clock icon next to the input. Is there a way of removing this little clock icon?

Answer 1

Based on the answers to this question: Change date input triangle to a calendar icon

We can see that we need to override the -webkit-calendar-picker-indicator pseudo-element, for example:

input[type="time"]::-webkit-calendar-picker-indicator {
    background: none;
}

Here it is in Chrome by default

Here it is with -webkit-calendar-picker-indicator background none

Of course you're hiding the fact there is a clickable picker so you may well want to think again about how you're displaying this if it's read only or do some more styling.

And to pull in Eiriks useful contribution from below, to remove the space completely add:

display:none;