nathansmith/formalize — Issue #45: Opera in Mac OS X: appearance of check boxes and radio buttons
Author: isellsoap
Created: 2012-01-14 16:54:36+00:00
State: open

The reason why check boxes and radio buttons [look so terrible](http://img220.imageshack.us/img220/3885/ohnetiteld.png) in Opera (Mac OS X) right now, is because of [this declaration](https://github.com/nathansmith/formalize/blob/master/assets/css/formalize.css#L76). I tested this by unchecking the `margin: 0;` and the result [looks good](http://img687.imageshack.us/img687/8964/ohnetitel2.png).

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 …

```css
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](http://stackoverflow.com/questions/4647992/how-to-make-css-visible-only-for-opera-11-opera-11-css-hack). A bit hacky, but it works surprisingly well. The end result code looks like this:

```css
/* 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?