CSS: Wrap div exactly around checkbox

Question

I would like to fit a div exactly around a checkbox. I am doing this because I want to use it to set a background color of the checkbox.

I've tried this, but the pink div sticks out below the checkbox.

jsFiddle

#checkbox{ margin:0px; 
           padding:0px;
           opacity:0.5;}

#checkbox_wrapper{ background:pink;
                  float:left;}

<div id = "checkbox_wrapper" >
      <input  type="checkbox" id = "checkbox"/>
</div>

Answer 1

Set line-height to 0, the default font size was setting the height as 20px.

jsFiddle

#checkbox_wrapper {
    background:pink;
    float:left;
    line-height:0;
}

PS cool trick, I'm going to use it in the future ;)

Update

Here's another way to implementation, with no wrapper or class required. Unfortunately only works in IE9+, Chrome and Safari. Apparently it's against the CSS 2.1 spec.

jsFiddle

HTML

<input type="checkbox" />

CSS

input[type=checkbox] {
    position:relative;
}
input[type=checkbox]:before {
    content:"";
    display:block;
    background:pink;
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    z-index:1;
    opacity:0.5;
}