The Post

Image Replacement For Form Buttons

In an effort to create standard-compliant XHTML code while still keeping a visually-appealing design, I came up with a way of using actual "Submit" and "Reset" form buttons and replacing them with cool images using CSS.

1. The Problem

We're building a form for a Website and want to keep the standard form behaviour (i.e. submitting the form when the using presses "Enter") by using proper a "Submit" button. On the other hand, our site's design dictates that we use an image for a button rather than the standard browser form-control.

One way to achieve this is to use an "input" element with type="image" like this:

<input type="image" src="/mybutton.gif" />

However, if we want to add an "Over" state to our button, we'll need to use CSS image-replacement techniques, which could result in an array of CSS fixes to get our button to properly align on different browsers. This is because once we give an <input type="image" /> element dimensions via CSS, each browser treats the margins it creates differently.

Besides, it would be much nicer if we actually used a proper "Submit" button so in case the image or CSS don't load the user still sees a "Submit" button.

2. The Solution

The solution to this problem is to use an actual <input type="submit" /> element, contained inside a wrapper element and apply our image-replacement CSS to the wrapper, rather than the <input> element itself. This will allow us to easily position our wrapper element wherever we want and keep our form button both functional and visually appealing.

Lets assume the following XHTML snippet:

<span class="InputWrapper" id="SubmitButton">
  <input type="submit" name="submit" value="Send Form" />
</span>

Now let's apply some CSS:

.InputWrapper{
  display:block;
  height:23px; /* button image height */
  width:150px; /* button image width */
  background:transparent url('/button.gif') no-repeat 0px 0px;
  position:relative;
  overflow:hidden;
}

.InputWrapper input{
  opacity:0; /* hide from Mozilla */
  cursor:pointer;
  display:block;
  width:300%; /* strech horiziontally */
  height:300%;/* strech vertically */ 
  position:absolute;
  z-index:1; /* set to lowest visible z-index */
  background:none; /* hide BG from IE */
  border:none; /* hide borders from IE */
}

3. What did we just do?

The trick here is to keep the button available if a user clicks it but hidden so that the underlying image will be visible instead.

Our InputWrapper class basically renders a block with our button's image set as its background, which will be visible once the button is hidden. We then apply some CSS magic to the input element contained inside our wrapper that does the following:

Setting opacity:0 hides our button from browsers who support this CSS rule (i.e. SeaMonkey, Firefox, Camino, Navigator, Safari)
Setting the button's height and width to 300% renders our button beyond the bounderies of the container, which, together with an absolute positioning and low z-indexing, cause Safari and Opera to respect the opacity rule we applied earlier. This also hides the button's text from the visible area, so now IE6 and IE7 don't display it
Setting backgrounds and borders to "none" tells IE6 and IE7 to effectively draw a transparent button

If we want to add an Over state to our button, we can simply add another CSS selector like this:

.InputWrapper:hover{
  background-position:-23px 0px;
}

4. Final notes