NicoleSwan.com

There’s a little caveat in the specifications for HTML form elements that I was not aware of until I was trying to put together a bbCode helper functionality for a project at work. I wanted icons representing input buttons. Easy, I thought to myself, I’ll just make the buttons of type image. Wrong. The problem? Image button values are only symbolic. It seems that only the coordinates of the image button are passed along with the rest of the form information.

The problem becomes further exacerbated as this specification prevents values from being passed properly for JavaScript actions. And as my JavaScript Console filled up with "x element has no value" errors, I pondered the ludicrousness of this specification. I’m sure there’s a reason, but it’s still absurd.

I went back to the drawing board, convinced that I could make it work — somehow. Then, I thought, what if I styled the buttons with CSS background styling instead?

So, I did. And it turned out surprisingly well. I made a class for each button using the appropriate image as the background image. To get rid of the typical button look, I set the border to none, took out all margins and paddings, and set the height and width of the element to be the same size as the chosen icon.

View my demo

My work project has icons made by a graphic designer, so it’s much more polished, but one can still glean the general idea. Other options include changing the cursor style or adding a hover property (which, lord knows, won’t work in IE). For those more graphically talented (I am NOT a designer as you might have already figured out), perhaps JavaScript could be used to help simulate a button press by changing border colors, etc, when the element is clicked.

The code can all be viewed through the source of the demo. I know the method works in IE6 and Firefox on Win2k and WinXP. I believe it may not work in Camino. If anyone has ideas for improvements, I would love to hear them.