Как заставить поле ввода изменить свой дизайн, когда он активен?

Question

Допустим, мой фоновый цвет красный. Я хочу, чтобы текстовое поле ввода отображалось красным цветом, но когда вы нажимаете внутри поля ввода для ввода, оно становится текстовым полем. И, конечно, когда вы не активны в поле ввода, он должен вернуться в исходное состояние (красный).

На самом деле это то, что вы видите довольно часто. Я думал об использовании toggleclass?

Все мои поля ввода добавляются с помощью 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

Попробуйте:

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

Я создал здесь пример: http://jsfiddle.net/FBPaA/

Он работает в Chrome, Firefox и IE

Answer 3

Вы можете сделать это либо с 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/