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

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

---

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 8 years ago.

Improve this question

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

Answer 1

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

Answer 2

textarea and input are different selectors:

Do this with jquery:

<script type="text/javascript">
$(document).ready(function(){
      $('textarea').on('focusout',function(){ // When losing focus
            $(this).css('background','#FFF');
      });
      $('textarea').on('focus',function(){ // When focus
            $(this).css('background','#333');
      });
});
</script>

Or CSS:

textarea { background-color:#fff !important; }  
textarea:focus { background-color:#333 !important; }