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 方法例如是：

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

见THIS FIDDLE。它有点落后，你会设置活动的样式，而不是模糊的选择器。

要模拟模糊，可以使用:not(:focus)、see here

Answer 2

textarea 和 input 是不同的选择器：

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