<TextField
  id="endTime"
  label="End Time"
  onChange={onEndTimeChange}
  type="time"
  defaultValue="16:00"
  className={classes.textField}
/>

the attribute 'type="time"' is what renders an icon that looks like a clock. I would like to change the color of the clock icon. How can I do that?

CodePudding user response：

You can use CSS to hide the clock icon and use your own icon:

Not tested on all browsers but is should work with browsers that support -webkit

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

input[type="time"]{
  z-index: 0;
  position: relative;
}

input[type="time"]:after{
  content: "";
  background-image: url(https://i.ibb.co/6g2dgm0/1535322171.png);
  height: 20px;
  width: 20px;
  background-size: contain;
  z-index: -1;
  position: absolute;
  right: 0;
}

<input type="time" />

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You should have a look at the