Ben’s Techy Musings

Recently I wrote about using an image as a form submit button. Essentially I described some basic CSS which most browsers will accept to style an <input type="submit" ... /> as an alternative to using <input type="image" ... />.

What I wrote is anything but groundbreaking and is widely used. And I’ve just found an even better way to do it, by using a button element instead of an input.

What prompted me to look for something better was noticing that Camino, the native OS X Gecko browser, lacks the depth of CSS support for input elements that the more popular browsers, namely Firefox, IE and Safari, have. This means that the many sites which use the technique I described in that post can be unusable in Camino, as form submit buttons appear grey and empty.

But apparently (and I did not realise this until today), using <button type="submit">Submit</button> is a valid and functional replacement for a form input element. And a button is more flexible, allowing you to put an image inside it instead of text, for example. Best of all, though, a button accepts styles more readily in most browsers.

I fixed my form submit button in Camino by changing it to a button and applying exactly the same styles that I had applied to my input. Rather than link you to the post again, here’s the code with the “input” prefix to the class name, just to help you avoid making the same mistake I made.

.customSubmit {
 width : 76px;
 height : 36px;
 overflow : hidden;
 padding : 36px 0 0 0;
 background : url('/images/custom_submit.png') no-repeat;
 border : 0;
}

And the button code, for good measure:

<button type="submit" class="customSubmit">Submit</button>

Again, this probably isn’t groundbreaking stuff but many sites could do with using this alternative to increase their browser support.

I’ve found an even better way of doing this. See HTML/CSS: Buttons are more styleable than inputs.

Most of the sites I develop involve a form of some sort, and usually the designers style the forms with custom buttons.

A simple way to deal with this is to use <input type="image" ... /> which gives the desired appearance and functionality with no fuss.

This is fine for method="post" forms where the information sent to the server isn’t visible to the user. When using a method="get" form, though, there’s an unsightly side effect of using the image input type. The URL will turn into something like this:

http://www.example.com/form.php?foo=bar&x=36&y=18

The X and Y coordinates of where the user clicked on the image are being added to the querystring. Presumably this information was once useful back in the days when people did arcane things like server-side image maps.

I neither need nor want this information and it could even confuse the user. So I go back to my input element, change it back to a type="submit" and get to work on manipulating its appearance with CSS.

First, I take off the border, add a background-image, set the width and height and make the text invisible using color : transparent. This works fine in all of the browsers I want to support except Internet Explorer (6 and 7), which ignores the transparent colour value and displays text on the button in black.

I can still hide this text, though, by adding overflow : hidden and then making padding-top equal to the height of my button. Now it works, in Safari, Firefox and IE!

The full code:

input.customSubmit {
 width : 76px;
 height : 36px;
 overflow : hidden;
 padding : 36px 0 0 0;
 background : url('/images/custom_submit.png') no-repeat;
 border : 0;
}