in Design

Form Button Styling

There are many ways to style a form “input” button to replace with an image that has a hover state. I’m sure just like me; you have hunted the internet high & low looking for the best solution that works across all browsers. I have found many different solutions in my hunt, all of these so called solutions have some form of error in an IE browser & you have to find some hack/workaround just for IE.

The Big NO NO

There is a solution that fixes the look but is a big NO NO for the accessibility, which I have come across on a number of occasions. I found that some developers will take out the value of the button (Value=””). I cannot stress enough that this is not a solution It’s a badly thought out hack as this will display fine when the CSS file renders it, Problem is if CSS is turned off (for example if the user is using a screen reader) the button is blank.

Suggested solutions

Text-indent: -9999px

This fix works in versions of Firefox (not mine) but not IE, Chrome or Safari it leaves the buttons value displaying over the image. So this solution is out of date now & doesn’t work.

Font-size: 0

This fix works in Firefox but again like the last solution has errors in IE, Chrome or Safari it displays a dot or a line of dots in the middle of the button over the image. So again this solution is out of date now & doesn’t work.

The Solution

I was looking over all the options and tried a few things that failed one after another, until I finally came across this method while trying all the different things I could think of.

Style your submit button as you normally would set your:

Background:

Height:

Width:

Boarder:

Cursor:

You now have the button you want apart from that pesky “value” hovering over your image making your lovely bit of design work look terrible.

To hide the value so it will not display on all browsers, you add the following 3 CSS values to your input:

1. Padding-top

Make this the same value as the height you have set

2. Overflow: hidden

This hides anything outside the height set & the padding push’s the “value” into the hidden area.

3. Float

Finally you need to add a float, even if you don’t need one. Without the float the padding adds to the height of the button which you can’t remove, without showing the value text again.

There you go a nice easy cross browser compatible form button.

David Martin

Developer

LHM Media, Birmingham, UK

www.lhmmedia.com

Twitter: @weallneedheroes

Bogdan

Bogdan is the founder of Top Design Magazine. You can find him in Bucharest-Romania so next time you want to drink a beer there and talk about web and stuff, give him a message.

Leave a Reply