Cross browser search box styling

form-search

        <h2>Search</h2>
        <form class="form-search">
            <fieldset>
                <input type="text" class="input-medium search-query">
                <button type="submit" class="btn">
                    <span class="icon-mag-glass">&#x2192;</span>
                    <i>Search</i>
                </button>
            </fieldset>
        </form>

form-search.styl

/*
    => form-search

    Extensions on the search box
--------------------------------------------------*/
.form-search {
    position: relative;
    padding: 0 32px 0 16px;

    input {
        position: relative;
        padding-right: 30px;
        width: 100%;
        height: 34px;

        left: -15px;
        float: left;
        height: 20px;
    }

    button.btn {
        color: $color--base;
        text-shadow: none;

        padding: 0;
        margin: 3px 2px 0 0;
        border: none;
        width: 35px;
        height: 34px;

        absolute: top right;

        background: none;
        border-radius: 0;
        box-shadow: none;

        &:hover,
        &:active {
            color: darken($color--base, 30%);
            background: none;
        }

        i {
            @extends .visuallyhidden;
        }
    }
}