0

私は次のHTMLを持っています

<input type="checkbox" asset="AAA" name="assets[AAA]" value="AAA" id="assets[AAA]" class="c_green" checked="checked">
<label for="assets[AAA]"></label>

CSSで私が持っている

input[type=checkbox].c_green {
    display:none;
}
input[type=checkbox].c_green+ label:before {
    content:"";
    display: block;
    width:1em;
    height:1em;
    border: 2px solid #66BC29;
    text-align: center;
    line-height:1em;
}
input[type=checkbox].c_green:checked + label:before {
    content:"\2713";
    display: block;
    font-size:1em;
    color:#66BC29;
}

その後、チェックボックスがチェックされておらず（ ）表示されていない場合、サファリグリーンラベル（非表示のチェックボックスの後に描画される）には幅がvalue=""ありません。それでも Chrome と FF では問題ありません。

上記の CSS のどこが間違っているのでしょうか?

4

1 に答える 1

3

display: blockの代わりにdisplay : inline-blockをラベルに使用してみてください

CSSで

input[type=checkbox].c_green {
     display:none;
}
input[type=checkbox].c_green+ label:before {
     content:"";
     display: inline-block;
     width:1em;
     height:1em;
     border: 2px solid #66BC29;
     text-align: center;
     line-height:1em;
}
input[type=checkbox].c_green:checked + label:before {
     content:"\2713";
     display: inline-block;
     font-size:1em;
     color:#66BC29;
}
于 2013-10-23T12:12:22.277 に答える