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でのみ動作します。どうやらそれはCSS2.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;
}