Lamentablemente, ni las entradas HTML ni el propio JavaScript admiten un tipo de datos de duración. <input type="time"> es para una hora del día y puede mostrar selectores AM/PM dependiendo de su ubicación.

Su mejor opción es trabajar con una entrada de texto y usar eventos de JavaScript para insertar automáticamente : e ignorar las entradas no válidas. Usar el atributo de patrón también puede ayudar. Asegúrese de convertir el valor en un número antes de usarlo desde el lado de JavaScript. Aquí hay algo para empezar.

 { let durationIn = document.getElementById("duration-input"); let resultP = document.getElementById("output"); durationIn.addEventListener("change", function (e) { resultP.textContent = ""; durationIn.checkValidity(); }); durationIn.addEventListener("invalid", function (e) { resultP.textContent = "Invalid input"; }); }

 input:invalid:not(:focus) { background: red; }

 <input id="duration-input" type="text" required pattern="[0-9]{2}:[0-9]{2}:[0-9]{2}:[0-9]{2}" value="00:00:00:00" title="Write a duration in the format hh:mm:ss:ms"> <p id="output"></p>

Estoy seguro de que hay muchas bibliotecas de código abierto que proporcionan un widget listo para usar para eso.

Tal vez intente algo como esto:

 <input type="time" step="0.001">

<label for="appt">Choose a time for your meeting:</label> <input type="time" id="appt" name="appt" min="09:00" max="18:00" required> <small>Office hours are 9am to 6pm</small>

Pruebe esto... ¡Espero que esto ayude! Esto es algo que hice para uno de mis proyectos...