Making IE behave with jQuery
Posted: Thu Jul 12, 2007 12:37 am
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:
and my jQuery
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,
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;
}Code: Select all
$(function(){
$('input[@type="text"], input[@type="password"]')
.addClass('text')
.focus(function(){
$(this).addClass('textfocus');
})
.blur(function(){
$(this).removeClass('textfocus');
});
});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;
}