CODEWITHSUNDEEP
htmlcssgoogle-chrome
beakersoft
beakersoft

Reputation: 2356

Hide the icon on a HTML time input field in Chrome

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?

Upvotes: 24

Views: 44577

Answers (2)

Irushan
Irushan

Reputation: 155

input[type="time"]::-webkit-calendar-picker-indicator {
  background: transparent;
  bottom: 0;
  color: transparent;
  cursor: pointer;
  height: auto;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width:auto

This solution enables clicking input field and popup the time picker.

Upvotes: 3

Andrew
Andrew

Reputation: 1140

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

Default time picker

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

Background none picker

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;

Upvotes: 73

Related Questions