Pseudo class in CSS - css

Question

I'm currently working on a footer. There are 3 input-elements as you can see in the picture. Now, if you click on a input, the border-top becomes white. And now I want to achieve: if a input-field is filled with text and I click on another element, a green border-top has to appear. Which pseudo class do I have to use?
HTML:
<div id="footer">
<ul>
<li> <input type="text" name="name" placeholder="Name"> </li>
<li> <input type="text" name="email" placeholder="Email"> </li>
<li> <input class="last" type="text" name="message" placeholder="Message"> </li>
</ul>
</div>
CSS:
#footer {
width: 100%;
background-color: rgba(0, 0, 0, 0.8);
text-align: center;
padding: 20px 0px;
}
input {
padding: 10px 5%;
background: rgba(0, 0, 0, 0.4);
outline: none;
width: 60%;
margin-bottom: 30px;
font-family: Roboto-Thin;
color: white;
border: none;
border-bottom: 2px solid rgba(255, 255, 255, 0.0);
border-top: 2px solid rgba(255, 255, 255, 0.0);
font-size: 18px;
transition: 0.2s;
}
.last {
margin-bottom: 0px;
}
input:focus {
border-top: 2px solid white;
}
[1]: https://i.stack.imgur.com/4ZE0K.png

Answer 1

Since you're using placeholders, you can use :not(:placeholder-shown):not(:focus)
#footer {
width: 100%;
background-color: rgba(0, 0, 0, 0.8);
text-align: center;
padding: 20px 0px;
}
input {
padding: 10px 5%;
background: rgba(0, 0, 0, 0.4);
outline: none;
width: 60%;
margin-bottom: 30px;
font-family: Roboto-Thin;
color: white;
border: none;
border-bottom: 2px solid rgba(255, 255, 255, 0.0);
border-top: 2px solid rgba(255, 255, 255, 0.0);
font-size: 18px;
transition: 0.2s;
}
.last {
margin-bottom: 0px;
}
input:focus {
border-top: 2px solid white;
}
input:not(:placeholder-shown):not(:focus) {
border-top: 1px solid green;
}
<div id="footer">
<ul>
<li> <input type="text" name="name" placeholder="Name"> </li>
<li> <input type="text" name="email" placeholder="Email"> </li>
<li> <input class="last" type="text" name="message" placeholder="Message"> </li>
</ul>
</div>