CSS ne fonctionne pas pour la liste des cases à cocher

Question

input[type="checkbox"]:checked + label:after{ 
 
       border: 2px solid red; 
 
       background-color: red; 
 
     }

<div class="input-field col s12"> 
 
     <input id="cb1" name="testCheck" type="checkbox" required> 
 
     <label for="cb1">Option 1</label> 
 
</div> 
 

 
<div class="input-field col s12"> 
 
     <input id="cb2" name="testCheck" type="checkbox" required> 
 
     <label for="cb2">Option 2</label> 
 
</div> 
 

 
<div class="input-field col s12"> 
 
    <input id="cb3" name="testCheck" type="checkbox" required> 
 
    <label for="cb3">Option 3</label> 
 
</div>

J'ai une liste de cases à cocher

<div class="input-field col s12"> 
     <input id="cb1" name="testCheck" type="checkbox" required> 
     <label for="cb1">Option 1</label> 
</div> 

<div class="input-field col s12"> 
     <input id="cb2" name="testCheck" type="checkbox" required> 
     <label for="cb2">Option 2</label> 
</div> 

<div class="input-field col s12"> 
    <input id="cb3" name="testCheck" type="checkbox" required> 
    <label for="cb3">Option 3</label> 
</div> 

J'utilise le CSS suivant pour changer la couleur des cases à cocher quand elle est cochée:

input[type="checkbox"]:checked + label:after{ 
       border: 2px solid red; 
       background-color: red; 
     } 

qui ne fonctionne pas. Fait intéressant, le même CSS:

input[type="radio"]:checked + label:after{ 
       border: 2px solid red; 
       background-color: red; 
     } 

fonctionne pour la liste de radiobutton.

Je veux quelque chose comme ça:

https://d2d3qesrx8xj6s.cloudfront.net/img/screenshots/68b1d126c5b51eb4267aed2e5fd751db1c72aa1b.jpeg

Answer 1

J'ai trouvé une solution qui a fonctionné pour moi. J'ai ajouté une classe à chaque case - class="filled-in" et j'ai changé mon css:

input[type="checkbox"].filled-in:checked + label:after{ 
    border: 2px solid red; 
    background-color: red; 
} 

Answer 2

Si c'est l'intégralité de votre code, il ne fonctionnera pas comme il est. Vous devrez donner à l'élément psuedo :after des propriétés supplémentaires. À savoir content: "";

Mise à jour - Dans un commentaire que vous avez mentionné, vous souhaitez simplement ajouter une bordure à la case à cocher. Pour ce faire, utilisez outline. Comme ceci:

input[type="checkbox"]:checked { 
 
    outline: 3px solid red; 
 
}

<div class="input-field col s12"> 
 
    <input id="cb1" name="testCheck" type="checkbox" required> 
 
    <label for="cb1">Option 1</label> 
 
</div> 
 

 
<div class="input-field col s12"> 
 
    <input id="cb2" name="testCheck" type="checkbox" required> 
 
    <label for="cb2">Option 2</label> 
 
</div> 
 

 
<div class="input-field col s12"> 
 
    <input id="cb3" name="testCheck" type="checkbox" required> 
 
    <label for="cb3">Option 3</label> 
 
</div>

Answer 3

Je ne vois pas de but dans le code affiché pour la :after - il n'y a rien après votre étiquette pour mettre en évidence, donc je ne sais pas pourquoi vous êtes essayant de le styler.

Si vous le supprimez de votre règle, le CSS met en surbrillance l'étiquette en rouge. Je pense que c'est ce que vous essayez de faire?

input[type="checkbox"]:checked + label{ 
    border: 2px solid red; 
    background-color: red; 
} 

Exemple de travail:

input[type="checkbox"]:checked + label{ 
 
       border: 2px solid red; 
 
       background-color: red; 
 
     }

<div class="input-field col s12"> 
 
     <input id="cb1" name="testCheck" type="checkbox" required> 
 
     <label for="cb1">Option 1</label> 
 
</div> 
 

 
<div class="input-field col s12"> 
 
     <input id="cb2" name="testCheck" type="checkbox" required> 
 
     <label for="cb2">Option 2</label> 
 
</div> 
 

 
<div class="input-field col s12"> 
 
    <input id="cb3" name="testCheck" type="checkbox" required> 
 
    <label for="cb3">Option 3</label> 
 
</div>