How do I change the style of an input box in IE7 on focus?

Question

I know IE7 has issues...

I've read posts here and on Google telling me I need to set the style by hand onfocus() and onblur(). However, everything I try isn't working!

Here is my jQuery

    $(document).ready(function(){                       

        if (jQuery.browser.msie === true) {

        $("input.date-picker").each(function(i) 
            {
                var $foo= $(this);
                $foo.bind('onfocus onblur', function() {
                    $(this).toggleClass('smalltxt-active');
                    });

            });                

            }//end if


     });

The a corresponding box

<input name="ctl00$SelectionContent$Selections1$txtDestinationDate" type="text"
id="ctl00_SelectionContent_Selections1_txtDestinationDate" class="date-picker" 
style="width:80px;" />

I have already confirmed that my code is detecting MSIE. That I am getting a count of 2 input.date-picker objects.

Any ideas?

Thanks in advance,

Answer 1

$foo.bind('onfocus onblur', function() {

should be

$foo.bind('focus blur', function() {

You don't need the each-loop really,

$("input.date-picker").bind('focusin focusout', function(){
  $(this).toggleClass('smalltxt-active');
}

Is just fine. It will select all input elements with the class 'date-picker' and bind the events to it. You may also want to read about the .focusin() and .focusout() events.

Answer 2

try this for many form element

$("input,select,button").bind('focusin focusout', function(){ $(this).toggleClass('focu'); });