Issue
I have multiple sections to a form. Each section has an indicator as to what step the user is on. I want to have it so that whenever an input within a section is focused it begins an animation on the indicator. I'm unable to use :focus-within due to it not being browser standard right now.
Right now I've saved the pulse animation as a hover effect, but I would like for this animation to start when the input is focused. I thought about using JQuery, but I wasn't able to figure it out myself.
Any help would be greatly appreciated.
@keyframes pulse {
0%,
40% {
box-shadow: 0 0 0 5px rgba(0, 109, 168, 0);
}
0% {
box-shadow: 0 0 0 0px rgba(0, 109, 168, 0.5);
}
100% {
box-shadow: 0 0 0 0px rgba(0, 109, 168, 0);
}
}
#indicator {
background-color: #006da8;
width: 25px;
height: 25px;
border-radius: 50%;
padding: 0;
margin-top: 15px;
margin-bottom: 15px;
}
#indicator:hover {
animation: pulse 2s ease infinite;
}
#indicator p {
padding-top: 3px;
margin: 5px;
color: white;
text-align: center;
}
input {
display: block;
margin: 10px 0 10px 0;
}
/* what i think i want to do? */
input:focus {
/* somehow start indicator animation???
Maybe use javascript? */
}
<form>
<section>
<div id="indicator">
<p>1</p>
</div>
<input type="text" />
<input type="email" />
<input type="password" />
</section>
<section>
<div id="indicator">
<p>2</p>
</div>
<input type="text" />
<input type="email" />
<input type="password" />
</section>
<section>
<div id="indicator">
<p>3</p>
</div>
<input type="text" />
<input type="email" />
<input type="password" />
</section>
</form>
Solution
Convert each section to a flexbox. Position the .indicator
after the inputs, and use order: -1
to move it to the top. Now you can use the sibling combinator input:focus~.indicator
to call the animation.
@keyframes pulse {
0%,
40% {
box-shadow: 0 0 0 5px rgba(0, 109, 168, 0);
}
0% {
box-shadow: 0 0 0 0px rgba(0, 109, 168, 0.5);
}
100% {
box-shadow: 0 0 0 0px rgba(0, 109, 168, 0);
}
}
section {
display: flex;
flex-direction: column;
width: 50vw;
}
section .indicator {
order: -1;
}
.indicator {
background-color: #006da8;
width: 25px;
height: 25px;
line-height: 25px;
border-radius: 50%;
margin-top: 15px;
margin-bottom: 15px;
color: white;
text-align: center;
}
input {
display: block;
margin: 10px 0 10px 0;
}
input:focus~.indicator {
animation: pulse 2s ease infinite;
}
<form>
<section>
<input type="text" />
<input type="email" />
<input type="password" />
<div class="indicator">1</div>
</section>
<section>
<input type="text" />
<input type="email" />
<input type="password" />
<div class="indicator">2</div>
</section>
<section>
<input type="text" />
<input type="email" />
<input type="password" />
<div class="indicator">3</div>
</section>
</form>
Answered By - Ori Drori
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.