Html Question posted in
Some basic documentation can be found here.

How to remove clock symbol in input type time in html

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.

Tags:

2

Answers


  1. 0

    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. 0

    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