Look-alike input and link elements

Problem: same style for input and link elements does not work

Forms often use input elements (<input>) and link elements (<a>) side by side. For example, to submit a form you’d use

<input type="submit" value="Submit">

and to cancel

<a href="page-you-come-from.html">Cancel</a>.

It turns out it’s not so easy to have the two elements look the same. You might be tempted to use two input elements or two link elements instead of one of both. That would however mean your page would require javascript to work. Well, I sold my soul to Progressive Enhancement, so I could never do that.

Apply the same style to both

To have <input> and <a> look alike you could style both elements with:

.button
{
    background-color:#d8d2d0;
    border-width:0px;
    padding:4px;
}

And it would look like this:

Applying the same style to both elements

Unfortunately, the ‘Cancel’ button is a little smaller in height than the other one. A minor issue perhaps, but for a professional site it’s unacceptable.

A small improvement

A recommended method  is to add

display: inline-block

to the style for the button class. I agree, makes sense. Now I’ve got:

A better styling?

Instead of being 2 pixels to small, it’s now 1 pixel to big. So hurrah!

Progressive enhancement

So I decided people without javascript have to deal with that pixel extra. To solve the problem in the general case I just transform the link element into a button (using javascript).

And here’s the code that does that (using jQuery to save a line of code or two).

$('form a.button').toButton();

$.fn.toButton = function()
{
    var url = $(this).attr('href');  // remember url

    // create a button
    var inp = document.createElement ('input');
    $(inp).attr ( { type : 'button', value : this.html(), class : 'button' }).click ( function () {
        // Direct to url. I use ajax here
        sendRequest ( url, updateWerkblad );
    });
    // replace it
    $(this).replaceWith( inp );
}

Finally!

I hope you like it!

Advertisement