I have a date input and I want it to have a placeholder, so I added a label and a display none. I have this 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>

It works fine on Firefox, but not on Chrome. If I remove the display of none of the input, it works, but I don't want the real input to be visible.

I tried to set a height and width to 0, an overflow: hidden, to remove the paddings and margins, but it created a mess in the display of my page, so I want to keep the display of none and find another solution.

Edit: I hid it another way:

position: absolute;
visibility: hidden;

It works now.