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?

before

after enter image description here

Answer

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="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id='myInput' placeholder='Enter Your Text Here' />