ansaurus

Question

Css attribute selector for input type="button" not working on IE7

Answer 1

A:

Attribute selectors are, unfortunately, not yet well implemented in all major browsers, because it is CSS3 and not 2.1, the current standard. Because the guys over at W3C are not that quick in making decisions, you better not set your hopes too high, because we won't be able to use css3 any time soon. Some aspects of it are already implemented, but this one isn't (surely not in IE6).

So, as you already said yourself, it would be much better to provide all of your inputs with a class, and make it a habit to do so every time you create a form. It's always handy and not a lot of work when you are already programming the form.

When I create a form, I always add the type of an input as a class, e.g.:

Especially the last two will come in handy in a lot of cases, because you don't háve to style the .button and .submit separately, but you cóuld if you would like to do so.

Robbert van den Bogerd 2010-02-02 16:24:18

+1. It may be worth noting that if the OP does not want to add classes, he can do something like this with javascript or a js framework like jQuery. :)

munch 2010-02-02 16:30:34

Attribute selectors are CSS 2, not 3, and have been a full W3 ‘Recommendation’ for a long time. (Even CSS3 Selectors are a ‘Proposed Recommendation’, which is pretty far along and well-implemented outside of the world of IE!)

bobince 2010-02-02 16:35:44

Allright, my mistake, but still it does not change the fact it isn't well implemented yet, because the 'world of IE' as you call it, is still a big world to deal with nowadays.

Robbert van den Bogerd 2010-02-04 12:59:59

Answer 2

+1 A:

They work for me in IE7 (both forms, with and without quotes).

Maybe there's another selector that is masking yours. You could try making your selector more specific in order to give it more priority, e.g.:

body form input[type="button"] {
background: red;
}

Manolo Santos 2010-02-02 16:30:16

Answer 3

+1 A:

input[type="button"]{ text-align:center; }

What do you expect that to do? The text in an <input type="button"> is already centered by default.

If you want to align the button itself within the parent, you have to set text-align on the parent element, not the button.

Attribute selectors — with or without quotes — do work on IE7. It's IE6 that's the problem browser there.

bobince 2010-02-02 16:31:19

Answer 4

+1 A:

I've had no problems getting css statements like that working in IE7; IE6 is always the problem but I believe this CSS would work in there as well. So I don't think IE7 is the problem.

The first thing is that your CSS sample will only affect buttons, it will not affect submit buttons. But that's an easy fix; change your css to:

input[type="submit"], input[Type="button"]
{ text-align: center; }

Second, as Manolo Santos said, could you have another CSS statement that is overriding the text-align setting? A setting on just input elements? It's probably worth using a developer tool like Firebug or the developer components built into Chrome or IE8 to help find the CSS problem.

Jeff Siver 2010-02-02 16:31:31

Answer 5

A:

Here is some detailed info about CSS selectors

Sarfraz 2010-04-01 06:16:12

Answer 6

+2 A:

I was struggling getting "input[type=button]" selectors working in IE7 or IE8. The problem turned out to be that the HTML Pages were missing a "!DOCTYPE" declaration. Once I added

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;

Then everything worked fine. You can obviously use a different "!DOCTYPE" declaration to suit your requirements.

ipr101 2010-08-02 09:21:28

Answer 7

A:

This question is old but if someone have a related problem.. I spend a few minutes trying to solve a similiar problem

input[type="Submit"] doesn't work on IE7 (despite of IE assigning the style correctly to the input as I saw in dev tools).

SOLUTION: I switched from Submit to submit and it worked!

I posted this here because it may help someone when debugging.

Pedro Gil 2010-10-06 08:56:38

ansaurus

tags:

views:

answers:

Css attribute selector for input type="button" not working on IE7

related questions