Criando uma caixa de seleção personalizada com CSS e Bootstrap
Eu tenho a seguinte marcação usando a estrutura de inicialização.
<div class="col-md-4">
<div class="custom-container">
<img class="center-block img-responsive img-circle invite-contact-trybe" src="{$img}" alt="Contact Image">
<input class="invite-contact-checkbox" type="checkbox">
</div>
</div>
Eu gostaria de conseguir o seguinte:
Existe alguma maneira de fazer isso usando CSS?
Eu obviamente precisaria de 3 estados:
Inicial:
.custom-container input[type=checkbox]{}
Alguma forma de estado de foco:
.custom-container input[type=checkbox]:hover{}
Quando está marcado:
.custom-container input[type=checkbox]:checked{}
Alguém pode sugerir uma solução?