Page 1 of 1

Making IE behave with jQuery

Posted: Thu Jul 12, 2007 12:37 am
by Luke
I'm once again trying to make IE behave properly with jQuery. I'm trying to use it to apply the proper styles to input elements without having to add class="text" because that's lame. So, here are my styles:

Code: Select all

form input[type="text"],

form input[type="password"],

form textarea,

form .text {
    
    border: 1px solid #999;
    
    padding: 2px;
    
    color: #666;
    
    background-color: #fff;

}

form input[type="text"]:focus,

form input[type="password"]:focus,

form textarea:focus,

form .textfocus {

    border-color: #000;
    
    color: #000;
    
    background-color: #FFFFDF;

}
and my jQuery

Code: Select all

$(function(){

    $('input[@type="text"], input[@type="password"]')
        .addClass('text')
        .focus(function(){
            $(this).addClass('textfocus');
        })
        .blur(function(){
            $(this).removeClass('textfocus');
        });

});
But this doesn't work because ie skips the css rules all together since it doesn't understand the type="text" portion. Can anybody think of a way to apply the proper styles without having to declare my styles twice and also without having to set a class="text" on the inputs? This is what I've done for now, but I'm not so happy with it (it sucks that I have to declare my styles twice)

Code: Select all

form input[type="text"],

form input[type="password"],

form textarea {
    
    border: 1px solid #999;
    
    padding: 2px;
    
    color: #666;
    
    background-color: #fff;

}

/* Because internet explorer is stupid,
   the text class has to be the same as
   the class above in order for ie to 
   render it properly - you cannot group
   them because ie will skip the rule
   since it doesn't understand the
   selector - todo: find a better way */
   
form .text,

form textarea {
    
    border: 1px solid #999;
    
    padding: 2px;
    
    color: #666;
    
    background-color: #fff;

}

form input[type="text"]:focus,

form input[type="password"]:focus,

form textarea:focus {

    border-color: #000;
    
    color: #000;
    
    background-color: #FFFFDF;

}

form .textfocus {

    border-color: #000;
    
    color: #000;
    
    background-color: #FFFFDF;
    
}

Posted: Thu Jul 12, 2007 9:15 am
by TheMoose
Try adding the CSS declarations that IE understands first? It might do the ol' first in processing of what it knows, and skip the items it doesn't but still apply the style. Not sure, but it might be worth a shot.

Code: Select all

form textarea,

form .text, 

form input[type="text"],

form input[type="password"] {
   
    border: 1px solid #999;
   
    padding: 2px;
   
    color: #666;
   
    background-color: #fff;

}

form .textfocus,

form textarea:focus,

form input[type="text"]:focus,

form input[type="password"]:focus {

    border-color: #000;
   
    color: #000;
   
    background-color: #FFFFDF;

}

Posted: Thu Jul 12, 2007 10:53 am
by Luke
nope, I tried that. Good suggestion though. sigh... :(

Posted: Fri Jul 13, 2007 4:31 pm
by RobertGonzalez
Isn't there a DOM element that will tell you if the HTML element <input> is of the type 'TEXT'? Can you tap into that?

Posted: Fri Jul 13, 2007 7:00 pm
by Luke
I could, but that is not the issue. jQuery finds the correct input elements and even assigns the .text class to those elements, but the problem is that IE doesn't apply the style because it skips the entire rule due to it not understanding [type="text"] in the css file. Does that make sense?