Question

I’d like to normalize some elements in my page, like put some margin/padding on the submit button.

Tried with input.submit {margin:0; padding:1px 6px 1px 6px;} but seems that it doesnt work. How can I do this using CSS 2.1?

Answer 1

Most reliably with CSS 2.1 I think you’ve got the option of applying a class or id to the button, or isolating the button inside of a particular parent element.

Otherwise CSS 2.1 does support the attribute=value selector notation, so:

input[type=submit],
/* or */
button[type=submit]

Should work. This is, however, variably reliable in Internet Explorer (although, to my surprise) is, according to PPK, of Quirksmode, available in IE>=7.

Edited to further explore the question:

The reason that input.submit {margin:0; padding:1px 6px 1px 6px;} “doesn’t work” is because that selector, input.submit would select input elements with a class-name of submit. Unless you gave the submit button that class-name there’s no matching element in your html.

With jQuery there’s the possibility to match submit elements with the selector $('input:submit'), but that’s not a valid CSS-selector (so far as I’m currently aware); the nearest thing that CSS can offer is, as noted above, the input[type=submit].

---

Further reference: CSS2 [attr] selector, at Quirksmode.org.