Full control styling a button

Styling buttons can really be a pain. There is just no way to make sure a button is styled exactly the way you want cross browser.

Recently I was tired with on of my ‘submit’ buttons which was looking just a little bit different in IE7 and IE8. In most cases I am styling an <a>-tag. Those are very easy to manage, but when submitting a form I don’t want to rely on javascript. And I want the [ENTER]-key to work like normal.

So I came up with the following code to fix the issue I was having:

HTML:

<form action="/" class="search-form">
    <input type="search" name="searchword" class="search-field"/>
    <label class="button label-button">
        search
        <input type="submit" class="submit-button"/>
    </label>
</form>

CSS:

.button {
    background: #0C0;
    display: inline-block;
    font-size: 1rem;
    line-height: 2rem;

    /* IE7 */
    *display: inline;
    *zoom: 1;
}
.label-button {
    position: relative;
    overflow: hidden;   
}
.label-button .submit-button {
    position: absolute;
    right: -1000px;
}

Enjoy

Speak Your Mind

*