Input Styling on Active

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;
}

In this old so thread lies some info, i guess: https://stackoverflow.com/a/35302732/3787407 .. Just use `input:not(:placeholder-shown)` to style inputs with text. — Hans Spieß, Apr 05 '21 at 22:41

score 0 · Answer 1 · answered Apr 06 '21 at 07:10

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.

Input Styling on Active

1 Answers1