Color Change after Field Entry - CSS - html

Question

Is there any css property which can be used to highlight all the filled fields? Just like we have, on focus css properties.
input[type="text"] {
background-color: white;
}
input[type="text"]:focus {
background-color: red;
}
<input type="text">
I want to make the field background-color green when there is something in the field. Is this possible through CSS? If not CSS, is there any other way?

Answer 1

Certainly you can achieve this with javascript.
The script below will listen for a keyup after the focus has shifted to any one of the <input> fields.
It will then check to see if the respective <input> field is empty.
If it is not, it will change the background of the <input> field to green.
var inputs = document.querySelectorAll('input[type="text"]');
function detectContent() {
if (this.value !== '') {
this.style.backgroundColor = 'green';
this.style.color = 'white';
} else {
this.style.backgroundColor = 'white';
this.style.color = 'black';
}
}
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
input.addEventListener('keyup', detectContent, false);
}
<input type="text" />
<input type="text" />
<input type="text" />

Answer 2

Try this...
$(document).ready(function() {
$(':input').on('input', function() {
if (this.value.length > 0) {
$(this).css('background-color', 'green');
} else {
$(this).css('background-color', '');
}
});
});
input[type="text"] {
background-color: white;
color: #fff;
}
input[type="text"]:focus {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
<input type="text">
<input type="text">
<input type="text">