CODEWITHSUNDEEP
css
Anil
Anil

Reputation: 51

input[type=submit] CSS is not working in Internet Explorer 6

The below code is not working in Internet Explorer 6. I can't put class or id in it. Are there any CSS hacks for that?

This code is in WordPress. I can't modify the code; I can only modify the CSS.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <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>
        <title>Untitled Document</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>

    <body>
        <FORM action="">
            <INPUT type=text name=s> 
            <INPUT type=submit value=Search>
        </FORM>
    </body>
</html>

Upvotes: 3

Views: 18340

Answers (3)

Gumbo
Gumbo

Reputation: 655845

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:

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

Upvotes: 3

Kim Andersen
Kim Andersen

Reputation: 1915

Instead, give the input a class, and then style it from there. Like this:

<input type="submit" class="myClass" value="Search" />

And then style the .myClass in your CSS. This should also work in IE6.

Upvotes: 11

erikkallen
erikkallen

Reputation: 34421

You're right, it doesn't work.

Quirksmode.org is an excellent site with browser compatibility info:

http://www.quirksmode.org/css/contents.html

Upvotes: 5

Related Questions