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。显然它违反了 CSS 2.1 规范。

jsFiddle

超文本标记语言

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