如何使输入字段在活动时改变其设计？

Question

假设我的背景颜色是红色。 我希望输入文本字段显示为红色，但是当您单击输入字段内部进行输入时，它会变成常规文本字段。当然，当您在输入字段中未处于活动状态时，它应该返回到原始状态（红色）。

这实际上是你经常看到的东西。 我想过使用切换类吗？

我的输入字段都附加了 jQuery

提前致谢

Answer 1

尝试 CSS3 中的新伪类，这里的 :focus 选择器...

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

CSS 示例：

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

希望有帮助，
-fs

Answer 2

您可以使用 css 类 或样式属性来做到这一点。

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/

它适用于 Chrome、Firefox 和 IE