i am dustin diaz

Styling inputs

Although there is no easy way to style input elements in a graceful and managable way, I'm hoping with the following JavaScript function we can ease this process. I know some of you are already thinking - ick, JavaScript overlapping with my styles? Well, I figure at the least, users who don't have JavaScript will experience many other fall backs than just losing the styling of their input elements. And even that being said, only the IE users will actually be seeing this drawback.

The problem when styling input's

Addressing the problem is fairly obivous. In HTML, there are several tag names that differentiate from each other and are easy to style uniquely from each other. However input elements can vary from a text box, radio button, and checkbox...which doesn't make for easily styling. If we wanted to style input, we'd have to style all three types! Yuck.

Styling with Attribute Selectors

If all browsers supported attribute selectors, we could easily do the following:

styling inputs with attribute selectors

input[type='text'] { font:bold 0.8em 'courier new',courier,monospace; }

input[type='radio'] { margin:0 20px; }

input[type='checkbox'] { border:2px solid red; }

Appending className's to our input's

Since not all browsers support attribute selectors, we can simply use className's instead. Although clever and smart, it can get tedious real fast. Thus, the CSS would then become this:

styling inputs with attribute selectors

input.text { font:bold 0.8em 'courier new',courier,monospace; }

input.radio { margin:0 20px; }

input.checkbox { border:2px solid red; }

And then we would have to manually add all those className's to our html documents.

Use JavaScript to automate the process

In a situation of Thanks but no thanks, we can opt out of manually adding a className to every input element and do it with JavaScript. This function is fairly straight-forward and simple.

Function appendInputTypeClasses

function appendInputTypeClasses() {

	if ( !document.getElementsByTagName )

	return;

var inputs = document.getElementsByTagName('input');

var inputLen = inputs.length;

	for ( i=0;i<inputLen;i++ ) {

		if ( inputs[i].getAttribute('type') )

		inputs[i].className += ' '+inputs[i].getAttribute('type');

	}

}

What this function does is basically adds a className of whatever type of input it is. So if it's type is 'text', then it's className will also have 'text'! Neat eh?

And just to be safe...

We can keep our attribute selectors as a "progressive enhancement" and our final CSS will look like this:

enhanced CSS for styling inputs

input[type='text'],input.text { font:bold 0.8em 'courier new',courier,monospace; }

input[type='radio'],input.radio { margin:0 20px; }

input[type='checkbox'],input.checkbox { border:2px solid red; }

Todays question and book information

The winner of today’s contest will receive a copy of DOM Scripting by Jeremy Keith Come up with a make-believe Band (Music Group). Name it. Come up with an album title, and list 5 tracks from the album.

Please remember to put your answers encapsulated within a <blockquote> element, and the regular discussion as normal.