How do I change the color of the small clock icon that comes with the html input tag with type=time

Question

I am trying to change the color of the small clock icon that appears within the input box when the input type is set to time.

The HTML tag that I am talking about can be seen below:

<input class="timeBox" type="time" value="13:30"/>

Does this answer your question? [Change color of Chrome's calendar icon in HTML Date Input](https://stackoverflow.com/questions/62162645/change-color-of-chromes-calendar-icon-in-html-date-input) — Heretic Monkey, Jul 20 '20 at 20:03

score 25 · Answer 1 · answered Oct 03 '20 at 13:00

25

You can change it with filter. For more info on changing colors using filter, see this answer.

input[type="time"]::-webkit-calendar-picker-indicator{
  filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(130deg) brightness(95%) contrast(80%);
}

<input type="time">

answered Oct 03 '20 at 13:00

Jespertheend

1,814
19
27

how to configure it to make it white? – Fernando Torres May 25 '21 at 18:42
@FernandoTorres using `filter: invert(100%);` should work – Jespertheend May 26 '21 at 08:33

score 8 · Answer 2 · answered Jul 20 '20 at 20:22

You can customize icon image, using colored image.

.a {
position: relative;
height: 68px;
}
.a::-webkit-calendar-picker-indicator {
    width: 64px;
    height: 64px;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABmJLR0QA/wD/AP+gvaeTAAAEr0lEQVR4nO2af2hVZRjHP88550I/zNrCiLaUpBYkJYYWNmtFUU3UchPJzGGJs1oRhRDDJkWaYLAERdugZG70hwyj1BY0Y6VWWCEUEqbVH1v900hI/8ndc57+uLvRLtvded9zzr2i5wOXcc7e9/k+93mf57nnPedASkpKSsqli5TbgZkv6fTsCFsR6oDrLc2cVej3Alp/2yUnTSaWNQA3Pae3InwNVMRiUPjLdZh9ersMhZ3ixSJsiSdsUaUC6HOUtb6DI0o3UCfQdWqXrA5j5+YXtZosnSj1BLQDy8P64Ni5Hg+uz4NeAIzQ/PO78vsvO2XQ8XnWC8ANeDSsndPbZegyYZ0XgBfwiIkPViUwa50uJuAVhHnAlTY2QqAnOsVogWY1qwKc6JTQ38u4BO5Yq2/h0wqAms42wnhx3MBcxCgAd67RxRrQCpwXaFOl5/j78oe5bHHmrFGr0LoWs4wC4ObSHhE2HntPtprLhXTKMrNs5pkGYC4CrkM3wN2rdaEoHQjV5tJFsEhlKEEJuDAFhaOjaZ9ROhSqE+4FoSlFCYzBCXIr/2V3+K4bhvtWWfaApDOgsMZsa9VUJ8l5kTLAJuI2OknOMwuAFj+OC1u7ifeAtATSEih+nGfDYT2KcE9Is0c2L5B7w9htXK6Po6xSUFW6P+yVj8LMK0YiGVDph/7yAAsm0wFY3qgt6rPjf6caly3Tlt5e2TmZP8Uw2m15OrbOCo/zVI6YfSbTWdmgta7yTv68B695imYCtq1s0NrJ/Cn6nUwGhy2Ba7NmToyjcxa46skGnRFkGRFlrwuZ/P979snmp5bqNcB6YO8TS3Se45Fxcv78baKVTAlEDYDPAYQVLvyAAAFTgQHg/vyYoTO0zria9cANrvATfm77rHDARCuRDKjMcoRxansCDheeuMKn5R+XCsjdFVL4zHdZ4fkM58cMDEj2mSX/OTB19G9f4NASUhcwvQ4Iih/nuW3p2K5uyq6Dcgaof7pep0mGzO6Pc5uv5kVjI57XH/G5LuOhnftluNDWZFyQV4J5dvfJn2H0OwvGmZBIAF5YaLab2/FJuN1kEguQSAlMdD4qYfWNbJoMDrsC2z6N9/6Aqb4JF+ReoJT6iWRA60N2d3QK2dI/NpPKngFpDwi5Am9+frH2gBJfB5RCP22CRoNLdEuslPppBhg5cKn3gHFScAio3jE/nt/9SVFAGJzIHxuiPRpTmkXpAG6M7kooBsWheSJ/bIhUAs9/I33A9Ohu2FH2n8Fy0jVfq7Lj3FA1JVIPKCd6nqY4XnGLVALloGu2VrkeTSivx2HPqgQ+mKN1orwKzAWmxeGIEX58puwyQBmIzwVjhoHvRXlbhf6oxmy3w+cF2hyPnseOx/+WWFj23R69Jq0yQISNS35M7i2xsJRtO+z57IkuHZ04AmD2cDTgnBeAE5T/Nfv9NVo1+m6w0bPAQowC4CrfugoiNEURjYPLHZrc3NPg76LYMWuCPu0qPAC8cahG8YU9D58sbRM8VKNVAk0Eo9cBSnsUe8ap/MUtugnYEEU0RjbVnZK2KAasavmrmbpIhZeBu4ApURyw4BxwDKW99lc5WGLtlJSUlJSLin8BxSm4QhC/BVoAAAAASUVORK5CYII=");
}

<input class="a" type="time" />

This may only work on Chrome browser, this doesn't work on Firefox. — Martin, Oct 03 '20 at 13:40
Yes, this should work with any webkit based browser, unfortunately this doesn't work on Firefox — Dmitry Kolchev, Oct 03 '20 at 20:00

score 1 · Answer 3 · answered Jul 20 '20 at 20:03

1

I think the best you can do is change the background color or you can remove it entirely

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

<input class="timeBox" type="time" value="13:30"/>

answered Jul 20 '20 at 20:03

DCR

14,737
12
52
115

do you know another way to target the element? – DCR Jul 20 '20 at 20:11
No, I was just confirming whether it only works on those browsers due to the `-webkit` prefix. Just thought it might be nice to warn later readers of the limitation. – Heretic Monkey Jul 20 '20 at 20:28

score 1 · Answer 4 · edited Nov 17 '22 at 12:10

1

If you want to just revert the color to dark mode, you can use

input {
    color-scheme: dark;
}

edited Nov 17 '22 at 12:10

Usitha Indeewara

870
3
10
21

answered Nov 14 '22 at 16:06

Jaros

27
5

How do I change the color of the small clock icon that comes with the html input tag with type=time

4 Answers4

Linked