Adding classes to input tags as a matter of course (Ask the CSS Guy)

Adding classes to input tags as a matter of course

I felt like sharing a practice that I've been doing for a while now when marking up form elements.

I always assign a class to every input that is the same to the input's type.

<input
  type="text"
  class="text" />

<input
  type="checkbox"
  class="checkbox" />

<input
  type="radio"
  class="radio" />

<input
  type="button"
  class="button" />

For input types that would be similar in presentation, I double up:

<input
  type="submit"
  class="submit button" />

<input
  type="password"
  class="password text" />

It's not uncommon for a project to require specified padding, width, and border colors for text inputs. I don't want to target all input tags, as it could have some unintended consequences for elements I don't want changed. So this practice has helped me greatly. Its html file size impact is miniscule, and it's also easy to remember, since the type value is always the class value.

Attribute selectors vs. class names

Attribute selectors almost remove the need for me to do this, but not quite. By attribute selectors, I mean the following:

input[type="text"] { border:1px solid #000; }

... in which the value of the 'type' attribute is used instead of a class or id.

The main reason attribute selectors don't do the trick is that IE6 doesn't support them. And though I can be persuaded to let a little IE6 wonkiness slip through for some parts of web site projects, forms are where I draw the line. After all, forms are how get feedback and money from customers - why screw with that?

The secondary reason can be found from the password input example above. I want password inputs to inherit the same presentational treatment as text inputs. Using the class names defined above lets me do that.

For me, this practice has proven pretty effective. Your mileage may vary, but I'd love to hear any other tips you have in mind.

Comments (8)

Eduardo said:

Amazing!
I just had, like 10 mins ago, the exact same issue with css selectors and IE6 and came up with the exact same solution. And then I open Google reader, open my feeds and this post shows up!

thanks!

Eduardo Scoz
http://www.mapia.com.br

# July 9, 2008 3:57 PM

Jeff Dion said:

Nice post, pretty smart, i used to make a lot of classes to style my forms, but i never thought to this way to simplify everything :D

# July 14, 2008 7:51 AM

Ace Calhoon said:

I've not used attribute selectors much for essentially the reason you list as primary above (no IE6 support, and a lot of people use that browser). But your secondary reason seems a bit odd.

Couldn't you write the selector as:
input[type="text"], input[type="password"] { /* shared CSS */}
input[type="password"] { /* password specific CSS */ }

# July 14, 2008 1:33 PM

CSS Guy said:

@ Ace,

Your right - my secondary reason for not using attribute selectors doesn't really hold water. I'm not sure what my train of thought was there.

# July 14, 2008 2:15 PM

Ionut said:

I use the same method as you for formatting input elements but i style the text field using the blank input selector (with no class attached) and add specific styles and classes for the other elements: submit radio checkbox etc...

# July 21, 2008 5:32 AM

fractionofawhole said:

I take the same approach as Ionut mentioned. Make a universal input style and then make classes for the other input elements. No need to make extra classes. It might not save a whole lot of file size, but it saves some.

# July 31, 2008 11:19 AM

Anand said:

Nice post! Useful info...

www.digitalpath.co.nz

# August 14, 2008 11:52 PM

jack said:

I prefer to put a class an an element wrapping each (label + input) or (label + textarea) or (label + select) combo. Found it gives me a bit more flexibility and control over numerous aspects of the form. For very simple forms (like a search form) I'll just add the class to the input as you described.

# August 19, 2008 8:31 AM

Ask the CSS Guy