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

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

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

jsFiddle

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

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

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

最佳答案

将line-height设置为0,默认字体大小将高度设置为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

Box" />

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;
}