Skip to content

Change input box background color if there is text

So I saw this cool design in kahoot! where if the text is typed in the input box, it background color changes. I was wondering, is it possible to do this in jquery, javascript or css?


after enter image description here


I suppose you could try this

$('#myInput').on('keyup', function() {
  input = this.value;
  if (input.length > 0) {
    $('#myInput').css('background-color', '#ccedd1');
  } else {
    $('#myInput').css('background-color', '#ebd4ca');
<script src=""></script>
<input id='myInput' placeholder='Enter Your Text Here' />