Ben’s Techy Musings

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;
}

This entry was posted on Monday, April 28th, 2008 at 1:31 pm and is filed under Techy Musings.You can follow any responses to this entry through the RSS 2.0 feed.You can leave a response, or trackback from your own site.