<input type="time" />
html, body {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background-color: #69c;
}
input[type="time"] {
padding-left: 1.5em;
background-repeat: no-repeat;
background-position: 0.25em center;
background-size: 1em;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><circle cx='20' cy='20' r='18.5' fill='none' stroke='%23222' stroke-width='3' /><path d='M20,4 20,8 M4,20 8,20 M36,20 32,20 M20,36 20,32' stroke='%23bbb' stroke-width='1' /><g fill='%23222' stroke='%23222' stroke-width='2'><circle cx='20' cy='20' r='2' /><path d='M20,24 20,5' style='transform:rotate(120deg); transform-origin: 50% 50%;' /><path d='M20,24 20,8' style='transform:rotate(20deg); transform-origin: 50% 50%;' /></g></svg>");
/* this style to complete the styling*/
border: 0.125em solid #369;
border-radius: 0.25em;
font-size: 3rem;
}
document.querySelector("input[type='time']").addEventListener("input", function() {
const reTime = /^([0-1][0-9]|2[0-3]):[0-5][0-9]$/;
if (reTime.exec(this.value)) {
const minute = Number(this.value.substring(3,5));
const hour = Number(this.value.substring(0,2)) % 12 + (minute / 60);
this.style.backgroundImage = `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><circle cx='20' cy='20' r='18.5' fill='none' stroke='%23222' stroke-width='3' /><path d='M20,4 20,8 M4,20 8,20 M36,20 32,20 M20,36 20,32' stroke='%23bbb' stroke-width='1' /><g fill='%23222' stroke='%23222' stroke-width='2'><circle cx='20' cy='20' r='2' /><path d='M20,24 20,5' style='transform:rotate(${360 * minute / 60}deg); transform-origin: 50% 50%;' /><path d='M20,24 20,8' style='transform:rotate(${360 * hour / 12}deg); transform-origin: 50% 50%;' /></g></svg>")`;
}
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.