Encontrei em algum blog há um tempo um estilo para checkbox. É um etilo que foi muito satisfatório para alguns projetos que já fiz porém, ele modifica/estiliza todos os checkboxes da página.
Preciso de ajuda para modificar esse estilo de forma que ele seja aplicado apenas quando for chamado na "class" de uma div ou form. Dessa forma os outros checkboxes ficarão com o estilo padrão de cada navegador.
Segue o estilo mencionado:
input[type=checkbox] + label {
display: block;
margin: 0em;
cursor: pointer;
padding: 0.1em;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox] + label:before {
content: "\2714";
border: 0.13em solid #000;
border-radius: 0.0em;
display: inline-block;
width: 1em;
height: 1em;
padding-left: 0.2em;
padding-bottom: 0.3em;
margin-right: 0.2em;
vertical-align: bottom;
color: transparent;
transition: .6s;
}
input[type=checkbox] + label:active:before {
transform: scale(0);
}
input[type=checkbox]:checked + label:before {
background-color: #00ff00;
border-color: #00000;
color: #000000;
}
input[type=checkbox]:disabled + label:before {
transform: scale(1);
border-color: #aaa;
}
input[type=checkbox]:checked:disabled + label:before {
transform: scale(1);
background-color: #bfb;
border-color: #bfb;
}
<form name="form_001">
<input type="checkbox" name="Opção 01" id="Opção 01" value="01" "><label for="Opção 01"> Opção 01</label>
<input type="checkbox" name="Opção 02" id="Opção 02" value="02" "><label for="Opção 02"> Opção 02</label>
</form>
Grato desde já.
Opção 01
... um id não pode ter espaços, e evite usar acentos... um id válido seria:opcao01
, ouopcao_01
etc...