skip to Main Content

I need to hide clock icon in input type html. with reference

  <input id="appt-time" type="time" name="appt-time" min="12:00" max="18:00" class='time'/>
input[type="time"]::-webkit-calendar-picker-indicator {
    background: none;
}

this one working fine. Clock symbol is not showing. but i need that class to target that input.

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

This one not working, still i’m able to see the icon.

2

Answers


  1. This targets an input within (or as a descendant of) an element with class time:

    .time input[type="time"]::-webkit-calendar-picker-indicator
    

    If the class is on the input itself then you wouldn’t want a space between them. Perhaps something like this:

    input.time[type="time"]::-webkit-calendar-picker-indicator {
        background: none;
    }
    <input id="appt-time" type="time" name="appt-time" min="12:00" max="18:00" class='time'/>
    Login or Signup to reply.
  2. Your selector is for an input as a child of .time.

    You need to select the .time element’s indicator

    .time::-webkit-calendar-picker-indicator {
      background: none;
    }
    <input id="appt-time" type="time" name="appt-time" min="12:00" max="18:00" class='time' />
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search