Select Form Buttons in CSS – Techniques with Examples

This article covers two ways, the easy and the advanced way to select a button or buttons in a form with CSS. We give example HTML and CSS for each technique to select a form button or form buttons. The advanced way uses a CSS attribute selector.

The Easy Way to Select a Form Button in CSS

The simplest way to select a form button is by id. Consider the following HTML, a form with a “Date” text field, and button labelled “Check”:

<form>
    <input name="date" type="text" />
    <input id="check-button" type="button" value="Check" />
</form>

The easy way to select the “Check” form button in CSS is using the “#id” CSS selector syntax. The button is selected in CSS using the unique id “check-button” we gave it in the HTML:

#check-button { font-size: 16px }

Advanced: Using a CSS Attribute Selector to Select Form Buttons in CSS

While using an id on the button is easy, using lots of ids can make HTML markup for more complex pages with many elements dense and harder to read.

A cleaner, more elegant way to specify the button is to use a CSS attribute selector:

form input[type="button"] { font-size: 16px }

The attribute selector here is [type="button"]. This selector as a whole says “for all forms, select the input elements whose type attribute is button“. In other words, select all the form buttons in the page.

Using a CSS attribute selector, the id on the form button isn’t needed, so id="check-button" can be dropped from HTML markup above. Here’s the simpler HTML:

<form>
    <input name="date" type="text" />
    <input type="button" value="Check" />
</form>

Submit buttons will not be selected by this method. If you want to selected a submit button, see our coming article.

Select a Particular Form Button with CSS Attribute Selectors

To select a particular buttons, the button can be specified by its label text. Here we have a form with two buttons, “Check” and “Download”:

<form>
    <input name="date" type="text" />
    <input type="button" value="Check" />
    <input type="button" value="Download" />
</form>

To just select the button labelled “Check”, use a selector with [value="Check"]:

form#check-form input[type="button"][value="Check"] { font-size: 16px }

Submit buttons will not be selected by this method. If you want to selected a submit button, see our coming article.

Select All Form Buttons in a Particular Form with a CSS Attribute Selector

To select the buttons in a particular form, one way is to put an id on the form:

<form id="check-form" >
    <input name="date" type="text" />
    <input type="button" value="Check" />
    <input type="button" value="Double Check" />
</form>

After adding an id to the form, add the form’s id to the CSS selector using ‘#’, like this:

form#check-form input[type="button"] { font-size: 16px }

This selector specifies all the buttons in the “check-form” form. Submit buttons will not be selected. If you want to selected a submit button, see our next article.

Which Browsers Support CSS Attribute Selectors?

Attribute selectors are supported by standards based browsers.

I’ve tested these techniques in Firefox 4 (FF4, 4.0, 4.0.1), Chrome 11 (11.0),  Safari 5 (5.0.5) and Opera 11 (11.10).

With Opera there’s a caveat: one attribute selector worked input[value="Check"], but two input[type="button"][value="Check"] did not. I didn’t investigate Opera further.

Internet Explorer 6 (IE6) does not support attribute selectors.

Attribute selectors are supported by Internet Explorer 7 (IE7) and Internet Explorer 8 (IE8) only if the !DOCTYPE has been specified at the top of the webpage. Attribute selectors should work fine in IE9; I haven’t tested if a DOCTYPE is required.

I have tested these techniques on Safari on the iPhone, iPad and iPod running iOS 4.3 (4.3.2). They work great!

References

You can read more about CSS attribute selectors at W3C or w3schools.

Questions?

Did you want to select form buttons in a way that wasn’t covered here? If so, write a comment below, and I’ll do my best to answer your query.