Css attribute selector for input type=“button” not

Question

I am working on a big form and it contains a lot of buttons all over the form, therefore I am trying to get working input[type="button"] in my main css file so it would catch all buttons with out having to add a class to every single one, for some reason this is not working on IE7, after checking on the web it says that IE7 should be supporting this.

Also it has to be type="button" and not type="submit" as not all buttons will submit the form.

Could anybody give a hint what am I doing wrong?

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

I have also tried input[type=button]

Answer 1

For whatever reason, there are times when attribute selectors will not apply before the page is displayed in IE7. This actually just happened to me. My selector was table[bgColor="#c0c0c0"] and would not apply on page load. Since I was using IE9 (Browser Mode: IE7, Document Mode: IE7 Standards), I was able to use F12 Developer Tools to look at my CSS file. I unchecked the selector and then checked it again. The attributes applied after that. This is reproducible exactly in good ol' IE7, so I'm going to have to find a work-around. (Note: Neither using single, double, or no quotes nor making variations in capitalization make an impact here.)

Answer 2

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

Answer 3

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.

Answer 4

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.

Answer 5

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.

Answer 6

I am pretty sure everybody is aware of the fact that the solution of adding a !DockType to the header isn't a possibility all the time.

For instance, I develop in DotNetNuke (DNN) environment which the developer doesn't have an access to the header. Then it makes it almost impossible to add !DocType.

In this case you don’t have too much of an option except relating a CssClass to the button and referring to it, explicitly, in the CSS module.