Input Styling on Active - css

Question

I'm making a form for a website and want the border of the fields to change color when the field is filled with text. I was thinking I could simply do it with adding an :active state but that doesn't seem to work...
Here is my code: https://jsfiddle.net/3uczn2bw/1/
HTML
<form>
<label for="fname">First name:</label><br>
<input type="text" placeholder="First name" id="fname" name="fname">
<label for="lname">Last name:</label><br>
<input type="text" placeholder="Last name" id="lname" name="lname">
</form>
CSS
input {
border: none;
outline: none!important;
padding: 10px 20px;
width: 300px;
}
input[type=text] {
color: #1a1a1a;
border-bottom: 4px solid #1a1a1a;
font-size: 24px;
font-weight: 900;
}
input[type=text]:focus {
border-bottom: 4px solid #178926;
}

Answer 1

To achieve this you need to add some scripts. I have given the script below by using this you will achieve your goal.
In script add below code:
document.querySelectorAll('input').forEach((input) => {
input.addEventListener('blur', function() {
this.classList.toggle('green', this.value.length > 0);
});
});
In CSS add below code:
.green {
border: 2px solid blue;
}
by using this CSS property you can manipulate the border properties.
This Code is useful for all input elements.