C’est quoi ce truc affreux ? C’est Noêl bro ! Déguise-toi !

La checkbox personnalisée

Promis, je t’en fais une plus complexe et lumineuse dans une prochaine astuce. Mais ça se mérite !

D’abord le html, very simple !


<div class="checkbox1">
      <input id="want" class="checkbox-2015" name="gout" value="want" type="checkbox">
      <label for="want">Tu aimes ce bouton ? (y'a intérêt !)</label>
</div>

Et puis le css. Si tu ne connais pas les pseudo-éléments :before et :after, il est temps de t’y mettre, Un monde fabuleux s’ouvrira à toi !


.checkbox1 [type="checkbox"]:not(:checked), 
.checkbox1 [type="checkbox"]:checked { 
                position: absolute; 
                left: -9999px; 
}

.checkbox1 [type="checkbox"]:not(:checked) + label,  
.checkbox1 [type="checkbox"]:checked + label { 
                position: relative; 
                padding-right: 45px; 
                line-height: 28px; 
                cursor: pointer; 
                padding-top: 0; 
                display: inline-block; 
                text-align: left; 
} 

.checkbox1 [type="checkbox"]:not(:checked) + label::before,  
.checkbox1 [type="checkbox"]:checked + label::before { 
               content: ''; 
               position: absolute; 
               right: 0; 
               top: 2px; 
               width: 18px; 
               height: 18px; 
               border: 1px solid #999999; 
               background: #ffffff; 
               border-radius: 50px; 
} 

.checkbox1  [type="checkbox"]:not(:checked) + label::after,  
.checkbox1  [type="checkbox"]:checked + label::after { 
                content: ''; 
                position: absolute; 
                top: 5px; 
                right: 3px; 
                width: 12px; 
                height: 12px; 
                background: #03c9a9; 
                border-radius: 50px; 
                font-size: 30px; 
                color: #ffffff; 
                line-height: 18px; 
                -webkit-transition: all .2s; 
                -moz-transition: all .2s; 
                -ms-transition: all .2s; 
                transition: all .2s; 
}