cssvault - inspiring creativity

Styling form elements is probably one of the toughest challenges in CSS design, right up there with positioning and dealing with varying browser quirks. That is why I personally try to avoid styling form elements, unless absolutely necessary.

Probably one of the toughest elements to style is the input type=”file”. It’s that cute little input box with a browse button beside it. You normally encounter them when uploading photos and files on a website.

In a perfect world these form elements should look consistent on all platforms and across different browsers. But this is not a perfect world, and so those who seek to style their form elements are faced with the task of making these form elements look consistent. A not to difficult task for standard input boxes, text areas, and buttons, but as always there needs to be a single element that just would not cooperate and obey CSS rules. You got it: input type=”file”

So we resort to using tricks such as multiple div layering, making the input box invisible, and even JavaScript (to the rescue, as always). For the longest time my favorite reference is Michael McGrady’s technique, which you can read about here.

Then there are those who decide that the best way to deal with these ugly creatures would be to hide the input box completely, leaving only the browse button visible for file selection. Accessibility proponents will probably cringe at this suggestion, but it works and sometimes that’s all that matters to the designer.

Personally, I prefer none of the above. In fact, I actually prefer not to style form elements at all (gasp!) Okay I was exaggerating. To not style form elements would be utterly moronic. But I think I got the point across. Remember the 90’s where everyone thought changing the color of the scroll bar was cool? Now it’s as good as dead and shamefully forgotten.

Personally the best form design is where styling done at a minimal, often restricted to sizing, placement, and font styling only. Let the operating system handle drawing of backgrounds and borders and scroll bars. They were designed that way. Plus, you’ll have less problems and and sleep better.

Zebra striping—also known as candy striping or half-shadow—is the application of faint shading to alternate lines or rows in data tables or forms. Examples of websites that use zebra striping include the currency site XE, the CIA World Factbook, and Monster.com. Zebra striping on the web is actually a carryover from print days: one of the first mentions of the technique appeared in 1961 [1]. Unfortunately according to this article on A List Apart, there really is no proof which demonstrates zebra striping as having a large, significant benefit over the other.

This illustration of Homer Simpson was created using pure HTML and CSS. The source website is written in Spanish, and it doesn’t look like any explanation was given on the creative process. Looks like it took a lot of time to create though. Ingenious!

The resulting image displays properly across most modern browsers:

• Internet Explorer 5.5, 6 y 7
• Opera 9
• Firefox 2
• Safari 3

I have even tested it in Firefox 3 and it displays properly with no issues.

Here is the complete HTML code used to create CSS Homer:
(more…)