I created a CSS class that triggers a transition effect when an input field is focused, and I used JQuery for input validation. The validation works smoothly, but now I want the transition effect to change color based on whether the input was valid or not.
This is the code for my transition class:
.bar::before {
content: '';
height: 0.125rem;
width: 0;
left: 50%;
bottom: -0.0625rem;
position: absolute;
background: #337ab7;
-webkit-transition: left 0.28s ease, width 0.28s ease;
transition: left 0.28s ease, width 0.28s ease;
z-index: 2;
}
Initially, I tried using .has-error, but it didn't work as expected:
.has-error .bar::before {
background: #d9534f;
left: 0;
width: 100%;
}
I also experimented with input:invalid, but it only applies to HTML validation rather than the library's validation. Despite searching for solutions like in this example: , I couldn't find a suitable solution.
In essence, I aim to make the transition bar turn red when the field is invalid upon focus, while keeping the error messages intact.
Any assistance would be highly appreciated :)