How to make an Inputfield change its design when active?

Question

Let's say my background color is red. I want the input textfield to appear red, but when you click inside the input field to type it becomes a regulad textfield. And ofcourse when you are not active in the input field it should be back to its original state (red).

Its actually something you see quite often. I thought of using toggleclass?

My input fields are all appended with jQuery

Thanks in advance

Answer 1

Try the new pseudo classes in CSS3, the :focus selector here...

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

CSS example:

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

Hope that helps, -fs

Answer 2

You could do that either with a css class or style propertys.

css:

.red {
    background-color: red;
}

js:

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

example:

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

Answer 3

Try this:

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

I've created an example here: http://jsfiddle.net/FBPaA/

It's working in Chrome, Firefox and IE