Forum Moderators: open

Message Too Old, No Replies

Cannot add border to input using jQuery

         

zamrg

2:02 pm on Feb 22, 2011 (gmt 0)

10+ Year Member



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

5:21 pm on Feb 22, 2011 (gmt 0)

WebmasterWorld Administrator 10+ Year Member



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

5:25 pm on Feb 22, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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");