When focusing on an input or checking its validity, the span should move up but it's not responding to any styles.
<div class="login">
<span class="logtxt">Username or email</span>
<input type="text" name="log" id="log" class="loginput" required="required">
</div>
CSS:
position: relative;
display: flex;
}
.loginput{
padding: 10px;
margin-bottom: 10px;
}
.logtxt{
position: absolute;
pointer-events: none;
left: 12px;
color: gray;
transition: all ease-in-out .4s;
padding: 10px;
}
.loginput:valid ~ .logtxt{
font-size: 2px;
}