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.

iBegin has just released iBox, a “lightweight, fast, and flexible” lightbox script.

It supports the following content types:

Images
It supports image overlaying and will automatically scale down the window if the browser’s viewpane is too small.

Documents
Displays linked documents in a similar fashion as Images.

Inline Containers
iBox can also display containers (e.g. hidden DIVs) within the same page.

YouTube Videos (Flash Video)
iBox’s architecture supports plugins. Images, Documents, and Inline Containers are all plugins, and YouTube Videos is provided as an example for developers to make their own plugins.

One notable aspect of iBox is its support for non-JavaScript capable browsers. It supports a target attribute which specifies the target document to be loaded, so that you can specify a different value for the HREF attribute. Very nifty.

Links:

• iBox Homepage
• iBox Support Forum
• iBegin Labs

As a follow up to my recent article on CSS-only, tableless forms, do check out the CSS Form Garden, a gallery that showcases uniquely style forms utilizing the same forms technique.

I have been receiving a couple of inquiries on how to create do CSS forms so let me direct you to Jeff Howden’s two year old CSS-Only, Table-less Forms article. Yes you heard me right folks: two years old! Yet it still displays properly on the newest browsers, which only shows how resilient the code is.

By now you must be wondering about the “almost perfect” part in the title. This is simply because the CSS code does not validate. The culprit? Of course, it’s IE again, with the JavaScript-in-CSS expression() hack.

Oh, and if you have questions or suggestions for articles, you may reach me via dennison [at] cssvault dot com

Have fun!

One of the greatest challenges CSS developers and designers face is styling form elements. Getting the button element style properly seems particularly elusive, and with good reason: different browsers render buttons — styled or unstyled –differently. Kevin Hale covers this topic in an article entitled “Rediscovering the Button Element”. It’s an old post, but may come in handy for those of you who are just taking the path to forms styling zen.