CSS：将div包装在复选框周围

Question

我想在一个复选框周围安装一个div。我这样做是因为我想用它来设置复选框的背景颜色。

我试过了，但粉红色的div突出了复选框。

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

将line-height设置为0，默认字体大小将height设置为20px。

jsFiddle

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

PS酷玩法，我将来会用它;）

更新

这是另一种实现方式，不需要包装器或类。不幸的是只适用于IE9 +，Chrome和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;
}