I had successfully achieved the desired outcome before, but now I am facing difficulties replicating it. The linked image displays my intended result versus what is currently happening.
https://i.stack.imgur.com/QUCuN.png
What could be causing this issue?
Working code snippet:
<div class="form">
<input type="name" name="name" autocomplete="off" required />
<label for="name" class="label-name">
<span class="content-name"> Name </span>
CSS styles used:
.content-name {
position: absolute;
bottom: 5px;
left: 0px;
transition: all 0.3s ease;
}
.form input:focus + .label-name .content-name,
.form input:valid + .label-name .content-name {
transform: translateY(-150%);
color: #5fa8d3;
}
.form input:focus + .label-name::after,
.form input:valid + .label-name::after {
transform: translateX(0%);
}
Code that is not producing the desired result:
<div class="form">
<input type="email" name="email" autocomplete="off" required />
<label for="name" class="label-email">
<span class="content-email"> Email </span>
</div>
CSS for the problematic code:
.content-email {
position: absolute;
bottom: 5px;
left: 0px;
transition: all 0.3s ease;
}
.form input:focus + .label-email .content-email,
.form input:valid + .label-email .content-email {
transform: translateY(-150%);
color: #5fa8d3;
}
.form input:focus + .label-email::after,
.form input:valid + .label-email::after {
transform: translateX(0%);
}