Tengo una entrada de fecha y quiero que tenga un marcador de posición, así que agregué una etiqueta y una pantalla de ninguno. tengo este codigo:

 document.querySelector("#date").onchange = (e) => { document.querySelector("#datelabel").innerHTML = e.target.value; }

 #datelabel { padding: 16px; border-radius: 15px; border: 2px solid rgba(0, 0, 0, 0.8); outline: none; font-size: 20px; transition: .2s; width: 200px; display: block; }

 <input type="date" name="date" id="date" style="display:none;"> <label class="input" for="date" style="color:var(--text);" id="datelabel">Date</label>

Funciona bien en Firefox, pero no en Chrome. Si elimino la visualización de ninguna de las entradas, funciona, pero no quiero que la entrada real sea visible.

Traté de establecer un alto y un ancho en 0 , un overflow: hidden , para eliminar los rellenos y los márgenes, pero creó un lío en la visualización de mi página, por lo que quiero mantener la visualización de ninguno y encontrar otra solución.

Editar: lo escondí de otra manera:

 position: absolute; visibility: hidden;

Ahora funciona.