That Norwegian Guy

This is a CSS hack for Firefox.

I know, it’s naughty, dirty, against the rules, and Andy Clarke won’t share his pudding with me. But today I just wanted to style that form element my way!

I used this to target a <input type="submit" class="btn" /> element in Firefox3.5, but it will affect everything from Mozilla1.8 (that is Firefox1.5) and up.

My original CSS had this padding:

.btn {padding: 5px 10px}

Bringing out Firefox hack number 1 helped somewhat:

.btn::-moz-focus-inner {
    padding: 0;
    border: 0;
}

But this wasn’t enough, so after digging into the Firefox’ form.css file and some follow-up googling, I ended up abusing Mozilla’s @-moz-document specification, which led me to this:

@-moz-document url-prefix() {
    .btn {
        padding: 4px 8px;
    }
}

The latter can obviously be used to target any normal CSS, but please use with care!

Tags: No Comments