css - 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

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