0

I just discovered a (to me) weird behavior in CSS.

http://jsfiddle.net/4dL3xv6c/1/

The first box should toggle between "Yes" and empty, while the second should toggle between the opposite of the first box (Yes = No / No = Yes) and empty.

Test scenario 1

Action: Click 1st box, then 2nd, and then 1st again.

Expected result: 1st box is empty and 2nd box is "Yes".

Actual result: 1st box is empty and 2nd box is still "No".

Test scenario 2

Action: Click 2nd box, and then 1st.

Expected result: 1st box is "Yes" and 2nd box is "No".

Actual result: 1st box is "Yes" and 2nd box is also "Yes".

In other words, if I toggle the 1st box, the 2nd box isn't affected - but it should.

Is this the correct behavior of CSS (in Chrome), or is there a bug? Can I make it work as expected?

HTML:

<input id="perm_active" type="checkbox" value="yes" />
<input id="temp_opposite" type="checkbox" value="yes" />
<label for="perm_active" class="btn btn-default btn-primary-toggle"><span></span></label>
<label for="temp_opposite" class="btn btn-default btn-temporary-toggle"><span></span></label>

CSS:

input {
    display: none;
}

label {
    display: block;
    float: left;
    width: 50px;
    height: 50px;
    margin-right: 10px;
    line-height: 50px;
    text-align: center;
    border: 1px solid #ddd;
}

/* Checked + empty */
input:checked + input + label span:before {
    content: "Yes";
    color: #3c763d;
}

/* Empty + checked */
input:checked + label + label span:before {
    content: "Yes";
    color: #3c763d;
}

/* Checked + checked */
input:checked + input:checked + label + label span:before {
    content: "No";
    color: #a94442;
}
Ivar
  • 4,344
  • 6
  • 38
  • 53
  • something like this http://jsfiddle.net/4dL3xv6c/2/ – Vitorino fernandes Apr 13 '15 at 15:09
  • possible duplicate of [Chrome/webkit not rendering css display change on input:checked + element + element](http://stackoverflow.com/questions/14201694/chrome-webkit-not-rendering-css-display-change-on-inputchecked-element-elem) – janfoeh Apr 13 '15 at 15:18
  • perhaps like this? - http://jsfiddle.net/nsjv2jwb/ – Stickers Apr 13 '15 at 15:23
  • Thank you for your answers, but unfortunately none of them solved the problem. I've added some details to my question to explain it further; if I toggle the 1st box, the 2nd box isn't affected - but it should. – Ivar Apr 14 '15 at 09:29
  • http://jsfiddle.net/4dL3xv6c/4/ Did you mean like this? If I now click the first box, the second says 'No'. – TheFrozenOne Apr 14 '15 at 09:37

0 Answers0