Issue
I recently asked a question about a contact form animation (the label text moves up when the box is clicked) and while I got the animation to work properly, I've run into a bug:
When I click on either the first and second boxes (not the third for some reason), it activates the animation for the rest of the boxes which is very annoying.
How can I get it so that when clicking on one box, it ONLY animates the box I clicked on and not the rest?
<div class="contact-col" style="position:relative display:inline;" >
<input type="text" name="name" required>
<span id="floating-label">Yourname</span>
<input type="email" name="email" required>
<span id="floating-label-1">Your email</span>
<input type="text" name="subject" required>
<span id="floating-label-2">Subject</span>
</div>
.contact-col input, .contact-col textarea{
width: 100%;
padding: 15px;
margin-bottom: 25px;
outline: none;
font-family: 'Merriweather Sans', sans-serif;
font-weight: 300;
font-size: 16px;
border: 1px solid #ccc;
box-sizing: border-box;
}
.contact-col input:focus, .contact-col textarea:focus {
border: 1px solid yellowgreen;
box-shadow: 0 0 0 1px #8C7D50;
transition: 25ms box-shadow ease-in-out;
}
input:focus ~ #floating-label,
input:not(:focus):valid ~ #floating-label{
top: -0.5%;
left: 0.5rem;
padding: 0.5rem;
font-size: 14px;
color: #8C7D50 ;
font-weight: 400;
transition: 0.2s ease-in-out;
}
#floating-label {
font-family: 'Merriweather Sans', sans-serif;
font-weight: 300;
font-size: 16px;
position: absolute;
pointer-events: none;
left: 1rem;
transform: translateY(-50%);
top: 4.5%;
color: #777;
background: white;
transition: 0.2s ease all;
}
#floating-label-1{
font-family: 'Merriweather Sans', sans-serif;
font-weight: 300;
font-size: 16px;
position: absolute;
pointer-events: none;
left: 1rem;
transform: translateY(-50%);
top: 19%;
color: #777;
background: white;
transition: 0.2s ease all;
}
input:focus ~ #floating-label-1,
input:not(:focus):valid ~ #floating-label-1{
top: 14.25%;
left: 0.5rem;
padding: 0.5rem;
font-size: 14px;
color: #8C7D50 ;
font-weight: 400;
transition: 0.2s ease-in-out;
}
#floating-label-2{
font-family: 'Merriweather Sans', sans-serif;
font-weight: 300;
font-size: 16px;
position: absolute;
pointer-events: none;
left: 1rem;
transform: translateY(-50%);
top: 33.5%;
color: #777;
background: white;
transition: 0.2s ease all;
}
input:focus ~ #floating-label-2,
input:not(:focus):valid ~ #floating-label-2{
top: 28.5%;
left: 0.5rem;
padding: 0.5rem;
font-size: 14px;
color: #8C7D50 ;
font-weight: 400;
transition: 0.2s ease-in-out;
}
Solution
This is an issue since you do not explicitly pick the inputs. As a result, if you selects your inputs by name, the problem will be resolved.
.contact-col input,
.contact-col textarea {
width: 100%;
padding: 15px;
margin-bottom: 25px;
outline: none;
font-family: 'Merriweather Sans', sans-serif;
font-weight: 300;
font-size: 16px;
border: 1px solid #ccc;
box-sizing: border-box;
}
.contact-col input:focus,
.contact-col textarea:focus {
border: 1px solid yellowgreen;
box-shadow: 0 0 0 1px #8c7d50;
transition: 25ms box-shadow ease-in-out;
}
input[name='name']:focus ~ #floating-label,
input[name='name']:not(:focus):valid ~ #floating-label {
top: -0.5%;
left: 0.5rem;
padding: 0.5rem;
font-size: 14px;
color: #8c7d50;
font-weight: 400;
transition: 0.2s ease-in-out;
}
#floating-label {
font-family: 'Merriweather Sans', sans-serif;
font-weight: 300;
font-size: 16px;
position: absolute;
pointer-events: none;
left: 1rem;
transform: translateY(-50%);
top: 4.5%;
color: #777;
background: white;
transition: 0.2s ease all;
}
#floating-label-1 {
font-family: 'Merriweather Sans', sans-serif;
font-weight: 300;
font-size: 16px;
position: absolute;
pointer-events: none;
left: 1rem;
transform: translateY(-50%);
top: 19%;
color: #777;
background: white;
transition: 0.2s ease all;
}
input[name='email']:focus ~ #floating-label-1,
input[name='email']:not(:focus):valid ~ #floating-label-1 {
top: 14.25%;
left: 0.5rem;
padding: 0.5rem;
font-size: 14px;
color: #8c7d50;
font-weight: 400;
transition: 0.2s ease-in-out;
}
#floating-label-2 {
font-family: 'Merriweather Sans', sans-serif;
font-weight: 300;
font-size: 16px;
position: absolute;
pointer-events: none;
left: 1rem;
transform: translateY(-50%);
top: 33.5%;
color: #777;
background: white;
transition: 0.2s ease all;
}
input[name='subject']:focus ~ #floating-label-2,
input[name='subject']:not(:focus):valid ~ #floating-label-2 {
top: 28.5%;
left: 0.5rem;
padding: 0.5rem;
font-size: 14px;
color: #8c7d50;
font-weight: 400;
transition: 0.2s ease-in-out;
}
Answered By - Mithat Ercan
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.