My goal is to design a form that includes date and time input fields. The placeholder text should move up by X pixels when the user clicks on the field.
While the form appears fine in Chrome, there seems to be an issue with overlapping form fields in Safari. How can I resolve this problem in Safari?
Safari https://i.sstatic.net/ORcpX.png
Chrome https://i.sstatic.net/yMOMl.png
HTML -
<div class="form-field col-sm-6">
<input id="date" name="birthdate" class="input-text js-input" type="date" placeholder="" required />
<label class="label" for="birthdate">Date of Birth</label>
</div>
<div class="form-field col-sm-6">
<input id="birthtime" name="birthtime" class="input-text js-input" type="time" placeholder="" required />
<label class="label" for="birthtime">Time of Birth</label>
</div>
CSS -
.contact-form .input-text:focus {
outline: none;
}
.contact-form .input-text:focus + .label,
.contact-form .input-text.not-empty + .label {
-webkit-transform: translateY(-24px);
transform: translateY(-24px);
}
.contact-form .label {
position: absolute;
left: 20px;
bottom: 11px;
font-size: 18px;
line-height: 26px;
font-weight: 400;
color: #b1afaf;
cursor: text;
transition: -webkit-transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
}