Opera in Mac OS X: appearance of check boxes and radio buttons

[isellsoap]

The reason why check boxes and radio buttons look so terrible in Opera (Mac OS X) right now, is because of this declaration. I tested this by unchecking the margin: 0; and the result looks good.

The user agent margins for check boxes are 3px 3px 3px 4px and for radio buttons 3px 3px ? 5px (bottom value not declared). I tested different values and it turns out that …

input[type="checkbox"] {
    margin: 2px 1px;
}

input[type="radio"] {
    margin: 1px;
}

… are the lowest possible margin values to trigger the nice looking check boxes and radio buttons.

Because of the new appearance and the margins you’d also have to adjust the top value. I tested that, too, and that’d be top: 1px;. Addressing only Opera 11 via media query is possible. A bit hacky, but it works surprisingly well. The end result code looks like this:

/* Only visible for Opera 11 */

@media not screen and (1) {

    input[type="checkbox"],
    input[type="radio"] {
        top: 1px;
    }

    input[type='checkbox'] {
        margin: 2px 1px;
    }

    input[type='radio'] {
        margin: 1px;
    }

}

… and you get consistent looking check boxes and radio buttons in all browsers in Mac OS X. What do you think?

---

EDIT

Or you remove the hacky Opera 11 media query and adjust the top value for all browsers, of course. :-)

[nathansmith]

It'd be easier just to move margin:0 to all other form elements. (For all other browsers)

Personally, I kinda like the vanilla radio/checkboxes in Opera. If I could, I'd make all OS X browsers do that.

But, I do see your point, that it breaks with OS consistency. Let me do a few tests to see how moving margin:0 to all other inputs looks, and I'll post here shortly.

[nathansmith]

I decided to just let browsers handle checkboxes and radio buttons entirely natively. So they'll look "aqua" (or whatever that new look is called in Lion) for OS X.

That also cut out a good chunk of code adjusting vertical alignment in various browsers. The Sass file is now about 40 lines smaller as a result (and the *.css is lighter too). Thanks for the insistence on making Formalize more consistent. :)

Git commit here...

https://github.com/nathansmith/formalize/commit/ea06048b56ed99590e5f9f2a6c7947e2f8060a64