2

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á.

2
  • Só uma obs: esses id's são inválidos: Opção 01... um id não pode ter espaços, e evite usar acentos... um id válido seria: opcao01, ou opcao_01etc...
    – Meu ovo
    10/03/2019 às 20:41
  • Obrigado pela dica.
    – michelbtos
    10/03/2019 às 21:44

1 Resposta 1

1

É só você substituir o seletor genérico input[type=checkbox] por uma classe e colocar essa classe nos checkboxes que você quer estilizar. Os que não tiverem a classe ficarão no estilo padrão do navegador:

.boxestilizado + label {
display: block;
margin: 0em;
cursor: pointer;
padding: 0.1em;
}

.boxestilizado {
display: none;
}

.boxestilizado + 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;
}

.boxestilizado + label:active:before {
transform: scale(0);
}

.boxestilizado:checked + label:before {
background-color: #00ff00;
border-color: #00000;
color: #000000;
}

.boxestilizado:disabled + label:before {
transform: scale(1);
border-color: #aaa;
}

.boxestilizado:checked:disabled + label:before {
transform: scale(1);
background-color: #bfb;
border-color: #bfb;
}
<form name="form_001">

<input class="boxestilizado" type="checkbox" name="Opção 01" id="Opção 01" value="01"><label for="Opção 01"> Opção 01</label>
<br>
<input type="checkbox" name="Opção 02" id="Opção 02" value="02"><label for="Opção 02"> Opção 02</label>

</form>

1
  • Muito obrigado pela ajuda. Abraço.
    – michelbtos
    10/03/2019 às 21:45

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .