Making IE behave with jQuery

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Making IE behave with jQuery

Post 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;
    
}
Last edited by Luke on Thu Jul 12, 2007 9:51 am, edited 1 time in total.
User avatar
TheMoose
Forum Contributor
Posts: 351
Joined: Tue May 23, 2006 10:42 am

Post 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;

}
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

nope, I tried that. Good suggestion though. sigh... :(
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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?
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post 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?
Post Reply