Question

我有以下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;
}

之后在safari绿色标签（隐藏的复选框后绘制）没有宽度，如果未选中复选框（value=""）且不可见。在Chrome和FF中它仍然可以。

上面的CSS我们错了什么？

Answer 1

而不是显示：阻止尝试使用 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;
}

无法在Safari中设置CSS中标签标签的宽度

1 个答案: