CSS или JS - изменение цвета фона при вводе фокуса ввода?

Question

Есть ли способ установить background-color на текст ввода, когда он теряет фокус?

Я пытаюсь использовать js, но я хотел бы знать, возможно ли это в css pure.

это, похоже, не работает

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'); 
     } 
     }); 

спасибо

Answer 1

Метод CSS3 будет, например:

См THIS FIDDLE. Его немного назад, вы бы создали активный, а не размытый селектор.

Для имитации размытия, вы можете использовать :not(:focus), see here

Answer 2

текстовое поле и ввести различные селекторы:

сделать это с помощью 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> 

Или CSS:

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