lundi 5 septembre 2016

change the label color if checkbox is checked and red if checkbox is unchecked

I'm trying to create a custom checkbox since its hard to style the native html checkbox so below is what I have tried. The checkbox is checked and unchecked when I click the label but I cant change the border color of the label when the input checkbox is checked and unchecked. Any help, ideas, suggestions, recommendations is greatly appreciated.

input[type="checkbox"]{display:none;}
label{
  border:1px solid red;
  width: 15px;
  height:15px;
  display:block;
}
label + input:checked{
  border-color: blue;
}
<div>
  <label>
    <input type="checkbox">
  </label>
</div>

Aucun commentaire:

Enregistrer un commentaire