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

我试过这个,但粉红色的div突出了复选框.

jsFiddle

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

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

Box_wrapper" >
      Box" id = "checkBox"/>
@H_502_12@

最佳答案
将line-height设置为0,默认字体大小将高度设置为20px.

jsFiddle

#checkBox_wrapper {
    background:pink;
    float:left;
    line-height:0;
}
@H_502_12@
PS酷技巧,我将来会用它;)
更新
这是另一种实现方式,不需要包装器或类.不幸的是只适用于IE9,Chrome和Safari. Apparently it’s against the CSS 2.1 spec.
jsFiddle
HTML

Box" />
@H_502_12@
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;
}
@H_502_12@