When setting up a date input with a placeholder, I encountered an issue. To hide the actual input field while displaying the label, I used the following code:
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>
The issue arose on Chrome but not on Firefox. Removing the display property made it work, but I wanted to keep the input hidden. Various attempts like setting height and width to 0, using overflow: hidden, or adjusting paddings and margins caused layout problems.
After some exploration, I found a working solution by hiding the input differently:
position: absolute;
visibility: hidden;
With this approach, the functionality works properly across different browsers.