CSS - Sibling selector not working in android?
Asked Answered
O

1

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?

Oldline answered 4/3, 2013 at 0:25 Comment(0)
T
8

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

The sibling selector is supported

the :checked pseudo-class is not

Tab answered 4/3, 2013 at 0:31 Comment(3)
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.Oldline
There seems to be a few hacks that work. check this out and/or try this input[type=checkbox]:checkedTab
css tricks forum moved - new url is: css-tricks.com/forums/topic/checkbox-hack-on-mobile-webkitErleena

© 2022 - 2024 — McMap. All rights reserved.