Currently, I am attempting to achieve the floating label effect on Contact Form 7 and have encountered an issue. Although I have successfully implemented the label effect on input:focus, I am struggling to make it persist once text has been entered and focus moves to the next input field.
In essence, I need the label to remain visible when the input is not empty.
Below is a snippet of my code:
<div class="wrapper-flex wrapper-form">
<div class="input-wrapper">
<label for="your-name"> [text* your-name]<span class="eticheta">FULL NAME</span></label>
</div><!-- input-wrapper -->
</div><!-- wrapper-flex -->
And here is the corresponding CSS:
.wpcf7-form .input-wrapper{
width:47%;
height: 50px;
position: relative;
}
.wpcf7-form input{
width:100% !important;
background: none !important;
border:none !important;
height: 30px !important;
margin:20px 0 0 0 !important;
}
.wpcf7-form .eticheta{
width: 100%;
display: block;
transition: all 0.3s ease;
position: absolute;
top:10px;
}
.wpcf7-form label:focus-within .eticheta, .wpcf7-form input:valid + .eticheta
{
top:0px;
}
I recognize that the selector .wpcf7-form input:valid + .eticheta is not functioning properly due to them not sharing the same parent. The input is nested within a span element. Despite this challenge, I am determined to find a solution.