2013-03-04 5 views
5

Dieser Code funktioniert in Chrome auf dem Desktop, aber nicht Android Lager-Browser:CSS - Geschwisterselektor funktioniert nicht in Android?

<!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> 

Grundsätzlich, wenn Sie hte Häkchen klicken, wird der Span-Tag Text sollte rot. Es wird nicht rot auf meinem Galaxy Note mit Android 4.0.

Was ist falsch an meinem Code?

Antwort

8

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

Die Geschwister-Selektor wird

unterstützt

die ausgewählt Pseudo-Klasse nicht

+0

ok, die Sinn macht, ist. Weißt du, welche CSS-Regel ich stattdessen verwenden kann, um alle Checkboxen in Android zu bekommen? input [checked = "checked"] hat mir nichts gegeben. – John

+1

Es scheint ein paar Hacks zu geben, die funktionieren. [check this out] (http://stackoverflow.com/questions/8320530/webkit-bug-with-hover-and-multiple-adjacent-sibling-selectors/8320736#8320736) und/oder versuche diese Eingabe [type = checkbox ]: geprüft – ElefantPhace

+1

http://css-tricks.com/forums/discussion/18225/checkbox-hack-on-mobile-webkit/p1 – ElefantPhace