CSS：将 div 完全包裹在复选框周围答案

【问题标题】：CSS: Wrap div exactly around checkboxCSS：将 div 完全包裹在复选框周围
【发布时间】：2013-03-31 18:50:25
【问题描述】：

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

我已经尝试过了，但是粉红色的 div 突出显示在复选框下方。

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

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

<div id = "checkbox_wrapper" >
      <input  type="checkbox" id = "checkbox"/>
</div>

【问题讨论】：

感谢为我制作了那个 jfiddle 的人！

标签： css checkbox background-color

【解决方案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;
}

【讨论】：

完美，谢谢 :) （如果它允许我也会接受答案 - 你太快了！！）
我在 Firefox 19.0.2 和 Opera 12.14 中看不到无包装器 jsFiddle 的效果。它适用于 Safari 6.0.3 和 Chrome 26.0.1410.43。
更新后，表单元素上生成的内容显然违反了 CSS 2.1 bugzilla.mozilla.org/show_bug.cgi?id=241985 很好。
是的，我知道那个，但这与这个问题无关。