<input type="text" id="line" class="valid"/>

input {
  color: white;
  padding: 20px;
  font-size: 34px;
  width:80%;
  margin: 0 auto;
  display:block;
}
input.valid {
  background: green;  
}

input.invalid {
  background: red;
}


var input = document.querySelector('#line');

function set_class() {
  var text = input.value;
  var valid = ! text.match(/\b[a-z]/); 
  input.setAttribute('class', valid ? 'valid' : 'invalid');
}

input.addEventListener('input', set_class);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.