CODEWITHSUNDEEP
javascripthtmlcsssafari
Eugeny89
Eugeny89

Reputation: 3731

can't set width of label tag in CSS in Safari

I'm having the following HTML

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

In CSS I have

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

After that in safari green label (that is drawn after hidden checkbox) has no width if checkbox in not checked (value="") and not visible. Still it's all ok in Chrome and FF.

What us wrong in above CSS?

Upvotes: 0

Views: 956

Answers (1)

N20084753
N20084753

Reputation: 2170

Instead of display: block try using display: inline-block for label

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

Upvotes: 3

Related Questions