Safari 7.1 CSS Problems with sibling selector

Question

Im using the Bootstrap plugin awesome-bootstrap-ckeckbox, Im working with ASP.NET MVC too, then all my checkbox render two inputs, one as a checkbox input and another as a hidden input, because of that I modified the CSS selector, for example:

HTML Code

<div class="checkbox">
   <input id="checkbox1" type="checkbox">
   <input type="hidden" />
   <label for="checkbox1">
      Default
   </label>
</div>
<div class="checkbox checkbox-primary">
   <input id="checkbox2" type="checkbox" checked>
   <input type="hidden" />
   <label for="checkbox2">
       Primary
    </label>
 </div>

CSS Code

/* awesome-bootstrap-checkbox */
.checkbox input[type="checkbox"]:checked + label::after {
  font-family: 'FontAwesome';
  content: "\f00c"; 
}
.checkbox input[type="checkbox"]:disabled + label::before {
    background-color: #eeeeee;
    cursor: not-allowed; 
}
.checkbox-primary input[type="checkbox"]:checked + label::before {
    background-color: #428bca;
    border-color: #428bca; 
}
.checkbox-primary input[type="checkbox"]:checked + label::after {
    color: #fff; 
}

/* my own version */
.checkbox input[type="checkbox"]:checked + input + label::after {
  font-family: 'FontAwesome';
  content: "\f00c"; 
}
.checkbox input[type="checkbox"]:disabled + input + label::before {
    background-color: #eeeeee;
    cursor: not-allowed; 
}
.checkbox-primary input[type="checkbox"]:checked + input + label::before {
    background-color: #428bca;
    border-color: #428bca; 
}
.checkbox-primary input[type="checkbox"]:checked + input + label::after {
    color: #fff; 
}

That works great in all modern browser except Safari 7.1, incredibly the original works but my modification not, I think the problem is with the sibling selector. Any idea???

Plunker Code: Example

@Adrift I changed the selector and now is working, can you tell why??? — TlonXP, Oct 15 '14 at 14:14

score 5 · Accepted Answer · edited May 23 '17 at 12:16

5

This is a known bug in Safari (unsure about Safari 8) and older versions of Chrome. There are several workarounds but the one I've used in practice is just replacing + with the ~ combinator:

.checkbox input[type="checkbox"]:checked ~ input ~ label::after

Also here are other questions addressing the same bug:

edited May 23 '17 at 12:16

Community

1
1

answered Oct 15 '14 at 14:31

Adrift

58,167
12
92
90

2

that's nth-child. Removed comment. http://stackoverflow.com/questions/26032513/ios8-safari-after-a-pushstate-the-nth-child-selectors-not-works – Christina Oct 15 '14 at 15:29

Safari 7.1 CSS Problems with sibling selector

1 Answers1