.yui3-checkbox {
display: -moz-inline-stack; /* Gecko < 1.9, since it doesn't support "inline-block" */
display: inline-block; /* IE, Opera and Webkit, and Gecko 1.9 */
width: 10px;
height: 10px;
border: inset 2px #999;
background-color: #fff; /* Need to set a background color or IE won't get mouse events *
/*
Necessary for IE 6 (Quirks and Standards Mode) and IE 7 (Quirks Mode), since
they don't support use of negative margins without relative positioning.
*/
_position: relative;
}
.yui3-checkbox span {
display: block;
height: 14px;
width: 12px;
overflow: hidden;
/* Position the checkmark for Gecko, Opera and Webkit and IE 7 (Strict Mode). */
margin: -5px 0 0 1px;
/* Position the checkmark for IE 6 (Strict and Quirks Mode) and IE 7 (Quirks Mode).*/
_margin: 0;
_position: absolute;
_top: -5px;
_left: 1px;
}
/* For Gecko < 1.9: Positions the checkbox on the same line as its corresponding label. */
.yui3-checkbox span:after {
content: ".";
visibility: hidden;
line-height: 2;
}
/*
Hide the actual checkbox offscreen so that it is out of view, but still accessible via
the keyboard.
*/
.yui3-checkbox input {
position: absolute;
left: -10000px;
}
.yui3-checkbox-focus {
border-color: #39f;
background-color: #9cf;
}
.yui3-checkbox-active {
background-color: #ccc;
}
.yui3-checkbox-checked span {
/* Draw a custom checkmark for the checked state using a background image. */
background: url(checkmark.png) no-repeat;
}