5

This code works fine in Chrome on desktop, but not android stock browser:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
input:checked ~ span {color:red;}
</style>
</head>
<body>
<label>
<input type="checkbox" />
<span>First item</span>
</label>
</body>
</html>

Basically when you click hte check mark, the span tag text should turn red. It's not turning red on my Galaxy Note with android 4.0.

What's wrong with my code?

John
  • 32,403
  • 80
  • 251
  • 422

1 Answers1

8

http://quirksmode.org/css/selectors/mobile.html

The sibling selector is supported

the :checked pseudo-class is not

ElefantPhace
  • 3,806
  • 3
  • 20
  • 36
  • ok that makes sense. Do you know which css rule I can use instead to get all checked checkboxes in android? input[checked="checked"] didn't give me anything. – John Mar 04 '13 at 01:12
  • 1
    There seems to be a few hacks that work. [check this out](http://stackoverflow.com/questions/8320530/webkit-bug-with-hover-and-multiple-adjacent-sibling-selectors/8320736#8320736) and/or try this input[type=checkbox]:checked – ElefantPhace Mar 04 '13 at 01:37
  • css tricks forum moved - new url is: https://css-tricks.com/forums/topic/checkbox-hack-on-mobile-webkit/ – Ruskin Dec 15 '16 at 13:35