CSS或JS - 当输入被聚焦时改变输入的背景颜色？

Question

有什么办法可以在输入文字失焦时设置background-color？

我想在JS中，但我想知道是否可能在CSS纯。

这似乎不工作

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

textarea的输入有不同的选择：

使用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; }