Problème avec le sélecteur CSS adjacent dans Chrome et dans Safari

Question

Considérez ce qui suit (Fiddle trouvé ici http://jsfiddle.net/burninromz/YDuzC/8/)

Ce qui devrait se passer, c'est que lorsque vous cliquez sur la case à cocher, l'étiquette appropriée devrait apparaître. Cela ne fonctionne pas dans Safari et Chrome, mais dans IE, Firefox et Opera. Lorsque vous inspectez les éléments dans Chrome et Safari, vous remarquez que le style est en fait appliqué à l'élément, mais n'est pas rendu correctement. Des idées sur la raison de cela ?

Voir ci-dessous.

html

css

    input[type="checkbox"]:checked + span {
      display:none  
    }

    input[type="checkbox"] + span {
      display:block  
    }

    input[type="checkbox"]:checked + span + span {
      display:block  
    }

    input[type="checkbox"] + span + span {
      display:none  
    }

Ce sélecteur ne fonctionne pas

input[type="checkbox"]:checked + span + span {
  display:block  
}

Answer 1

Vous pouvez essayer d'utiliser le combinateur de frère. ~ est similaire à +, cependant, il est moins strict. Alors qu'un sélecteur adjacent ne sélectionnera que le premier élément qui est immédiatement précédé par le premier sélecteur, celui-ci est plus généralisé. Il sélectionnera tous les éléments tant qu'ils suivent le premier sélecteur dans l'arborescence.

Donc, votre CSS ressemblerait à ceci...

input[type="checkbox"]:checked + span {
  display:none  
}

input[type="checkbox"] + span {
  display:block  
}

input[type="checkbox"]:checked ~ span ~ span {
  display:block  
}

input[type="checkbox"] + span + span {
  display:none  
}

Voici un exemple de travail, fourni par @Adrift, en utilisant le code ci-dessus: jsfiddle.net/YDuzC/10

Answer 2

Je vais utiliser le pseudo-élément :content

HTML

CSS

span{
  display:block;
}

input[type="checkbox"] + span:before {
  content:"Non cochée";
}

input[type="checkbox"]:checked + span:before {
  content:"Cochée";
}

Exemple Pen