1

I need to have two labels for one input field with different styles.

For some reason this code doesn't work. It does work perfectly for first label, and only partially for second label.

this code works

input.switcher[type=checkbox] + label + label

but this doesn't (second label doesn't change color by checking on and off)

input.switcher[type=checkbox]:checked + label + label

any advice how to solve this issue is appreciated!

http://jsfiddle.net/dantetemp/tLPkk/

Adrift
  • 58,167
  • 12
  • 92
  • 90
alexey m
  • 13
  • 5
  • Why do you "need" two labels for one input? More background please, perhaps there's a better solution. – Madara's Ghost Jul 29 '13 at 16:47
  • It isn't working for me in Chrome 28 - Windows 7 – Adrift Jul 29 '13 at 16:48
  • Actually, firefox 20, windows7, no issues :). – Milche Patern Jul 29 '13 at 16:48
  • I believe it's a WebKit bug specific to a few versions of Chrome and possibly Safari - I've seen questions similar to this before .. – Adrift Jul 29 '13 at 16:50
  • yup, seems so. works in IE, FF, Chrome 30. Doesn't work in Opera 15 and Safari 5.1.7 – Harry Jul 29 '13 at 16:53
  • [This](http://stackoverflow.com/questions/8320530/webkit-bug-with-hover-and-multiple-adjacent-sibling-selectors) question alludes to a similar issue in WebKit, despite it being kinda old. – Adrift Jul 29 '13 at 16:56
  • 1
    This question is also, I think, relevant (albeit I'm not convinced it's a dupe): http://stackoverflow.com/questions/17219286/why-does-the-general-sibling-combinator-allow-toggling-pseudo-elements-content (disclaimer: that's one of *my* questions). – David Thomas Jul 29 '13 at 17:01
  • 1
    This seem like 'A' bug (494 000 answers) : https://www.google.ca/#sclient=psy-ab&q=google+chrome+adjacent+sibling+combinator+checked+bug – Milche Patern Jul 29 '13 at 17:01

1 Answers1

5

Strangely it seems to work (in Chrome 28 - where I presume you have the problem judging by the comments) if you change the adjacent sibling combinator to the general sibling combinator, ~ for the second <label> - e.g.

input.switcher[type=checkbox]:checked + label ~ label {
    color: green;
    font-size: 70px;
}

http://jsfiddle.net/tLPkk/1/

Adrift
  • 58,167
  • 12
  • 92
  • 90