入力フィールドをアクティブにするとそのデザインが変更されますか？

Question

私の背景色が赤であるとしましょう。 入力テキストフィールドを赤で表示したいのですが、入力フィールド内をクリックして入力すると、調整用のテキストフィールドになります。また、入力フィールドでアクティブでないときは元の状態（赤色）に戻るはずです。

実際にはかなり頻繁に見えるものです。 私はトグルクラスを使用することを考えましたか？ここでの焦点セレクタ...

http://www.w3.org/TR/css3-selectors/#the-user-action-pseudo-classes-hover-act

CSSの例：

私の入力フィールドは、すべての事前

Answer 1

のおかげでは、CSS3の新しい擬似クラスを試してみてくださいjQueryの

が付加されています：

textarea:focus, input:focus { 
    background:#f00; 
    border:3px solid #0f0; 
} 

希望があれば、 -fs

Answer 2

これはcss classまたはスタイルプロパティで行うことができます。

CSS：

.red { 
    background-color: red; 
} 

JS：

$(function() { 
    $('input').bind('focusin', function() { 
     $(this).removeClass('red'); 
    }).bind('focusout', function() { 
     $(this).addClass('red'); 
    }).trigger('focusout'); 
});  

例：

http://www.jsfiddle.net/NdyGJ/

Answer 3

これを試してみてください：

$('input').bind('focusin focusout', function() { 
    $(this).toggleClass('red'); 
}); 

私はここで例を作成しました： http://jsfiddle.net/FBPaA/

それは、これはIE7で動作しない、それは古い文書型とIE8で動作しないクロム、FirefoxとIE