Search code examples
javascriptjquerycssfocushtml-input

CSS or JS - change background color of input when input is focused out?

Is there any way to set a background-color on input text when it looses focus?

I'm trying in js but i would like to know if it's possible in css pure.

this seems not working

input{
 background-color:#fff !important;
}   
input:focus{
background-color:#333 !important;
}
//input:unfocused and has value{ ??? :) }

 $('input,textarea').on('focusout',function(e){
      if($(this).val().length){
       $(this).css('background-color','#fff');
      }
      });

thank you

Solution

  • The CSS3 method would be, for example:

    input[type=text]:focus{
    color:red;
}

    See THIS FIDDLE. Its a bit backward, you'd style the active, not the blurred selector.

    To simulate blur, you can use :not(:focus), see here