Cannot add border to input using jQuery

[zamrg]

I'm not sure if this post is applicable to the CSS sub-board or JS, but I'm posting here since I'm trying to modify the style of a form input when it gains focus.

JS:

$('input[type="text"], textarea, select').focus(function() {
$(this).addClass('input-active');
});
$('input[type="text"], textarea, select').blur(function() {
$(this).removeClass('input-active');
});

CSS:

.input-active {
background-color: #FFFFCC;
border: 5px solid #000;
}

The input takes the background-color attribute but the border doesn't change.

[coopster]

Works fine for me. You likely have something else clashing. Watch one of the elements in Firebug as it gains and loses focus to see what style is being applied and/or possibly overridden.

[caribguy]

What happens if you specify the original style in a class?

I've seen some jQueryUI examples that do this: $(this).removeClass("input-inactive").addClass("input-active");