input[type=submit] css not working in IE6

December 14, 2009 at 2:03 pm (Css, Javascript)
Tags: css in ie6, input

<style type="text/css">
form input[type=submit]{
background-color:#FE9900;
font-weight:bold;
font-family:Arial,Helvetica,sans-serif;
border:1px solid #000066;
}
</style>

the above code wont work in IE6, either i cant put class or id in it.

The Internet Explorer 6 doesn’t support the attribute selector
[attr="value"]. 

So there is no way to address that submit input element with CSS only 
(IE 6 doesn’t support the adjacence selector + and :last-of-type selector 
neither that would help in this case).

So the only options you have is to either make that element uniquely addressable
by adding a class or ID or wrapping it into an additional span element.

Or – use JavaScript to select that element and apply the CSS rule to it. 
jQuery can make this fairly easy:

$("form input[type=submit]").css({
    "background-color": "#FE9900",
    "font-weight": "bold",
    "font-family": "Arial,Helvetica,sans-serif",
    "border": "1px solid #000066"
});

or another way you can call is using javascript,

Let’s just change our HTML to this.


<input type="text" class="text" value="" />
<input type="button" class="button" value="I am a button" />
<input type="submit" class="button" value="I am a submit" />


Then have the complimenting CSS:


input.text { /* my text css */ }
input.button { /* my button css */ }


Simple enough… but I’m still not satisifed. I’m thinking to myself, What a hassle. Who really wants to append all those classes.

Javascript will do it for you

Need I say more….

A plus i added to the code is that instead of hardcoding in text strings the types,

you the type assign as the class for each element, like:

window.onload = function()
{
var coll = document.getElementsByTagName(”input”);
for(var i=0; i<coll.length; i++)
{
if(coll[i].type)
{
coll[i].className += ‘ ‘ + coll[i].type + ‘ ‘;
}
}
}

This way, all inputs are assigned classes with their own names 
(without overwriting any additional classes the input might have)

Author: Gumbo and Ded

The Internet Explorer 6 doesn’t support the attribute selector [attr="value"]. So there is no way to address that submit input element with CSS only (IE 6 doesn’t support the adjacence selector + and :last-of-type selector neither that would help in this case).

So the only options you have is to either make that element uniquely addressable by adding a class or ID or wrapping it into an additional span element.

Or – as you’ve already stated that you can’t do that – use JavaScript to select that element and apply the CSS rule to it. jQuery can make this fairly easy: