twitter bootstrap - Safari 7.1 CSS Problems with sibling selector -

twitter bootstrap - Safari 7.1 CSS Problems with sibling selector -

im using bootstrap plugin awesome-bootstrap-ckeckbox, im working asp.net mvc too, checkbox render 2 inputs, 1 checkbox input , hidden input, because of modified css selector, 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; } /* 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 modern browser except safari 7.1, incredibly original works modification not, think problem sibling selector. idea???

plunker code: example

this known bug in safari (unsure safari 8) , older versions of chrome. there several workarounds 1 i've used in practice replacing + ~ combinator:

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

also here other questions addressing same bug:

webkit bug `:hover` , multiple adjacent-sibling selectors css adjacent sibling selectors, safari , <nav> elements

css twitter-bootstrap safari css-selectors