3

Caros, estilizei o meu checkbox, porem gostaria de poder selecionar mais de uma opção, mantendo o estilo de CSS que criei.Só que devido minha regra de CSS, esta selecionando apenas para o primeiro item.

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
input[type=checkbox] {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  border: 1px solid #c8c6c6;
  width: 15px;
  height: 15px;
  border-radius: 2px;
}

input[type=checkbox]+label:before {
  font-family: FontAwesome;
  display: inline-block;
  font-size: 19px;
  margin: 10px 0px 10px 30px;
}

input[type=checkbox]+label:before:focus {
  outline: none;
}

#checkbox {
  display: none;
}

#checkbox+label:before {
  content: "\f096";
  letter-spacing: 10px;
}

#checkbox:checked+label:before {
  content: '\f046';
}
<input type="checkbox" id="checkbox" name="">
<label for="checkbox"> Item 1</label>
<br>
<input type="checkbox" id="checkbox" name="">
<label for="checkbox"> Item 2</label>
<br>
<input type="checkbox" id="checkbox" name="">
<label for="checkbox"> Item 3</label>
<br>
<input type="checkbox" id="checkbox" name="">
<label for="checkbox"> Item 4</label>
<br>
<input type="checkbox" id="checkbox" name="">
<label for="checkbox"> Item 5</label>
<br>

1 Resposta 1

2

Na verdade o seu problema é que todos os id do seu código são iguais, vc tem que fazer um id por elemento. Da uma olhada no código abaixo funcionando.

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
input[type=checkbox] {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  border: 1px solid #c8c6c6;
  width: 15px;
  height: 15px;
  border-radius: 2px;
}

input[type=checkbox]+label:before {
  font-family: FontAwesome;
  display: inline-block;
  font-size: 19px;
  margin: 10px 0px 10px 30px;
}

input[type=checkbox]+label:before:focus {
  outline: none;
}

#checkbox1  {
  display: none;
}

#checkbox1+label:before {
  content: "\f096";
  letter-spacing: 10px;
}

#checkbox1:checked+label:before  {
  content: '\f046';
}
#checkbox2  {
  display: none;
}

#checkbox2+label:before {
  content: "\f096";
  letter-spacing: 10px;
}

#checkbox2:checked+label:before  {
  content: '\f046';
}
#checkbox3  {
  display: none;
}

#checkbox3+label:before {
  content: "\f096";
  letter-spacing: 10px;
}

#checkbox3:checked+label:before  {
  content: '\f046';
}
#checkbox4  {
  display: none;
}

#checkbox4+label:before {
  content: "\f096";
  letter-spacing: 10px;
}

#checkbox4:checked+label:before  {
  content: '\f046';
}
#checkbox5  {
  display: none;
}

#checkbox5+label:before {
  content: "\f096";
  letter-spacing: 10px;
}

#checkbox5:checked+label:before  {
  content: '\f046';
}
<input type="checkbox" id="checkbox1" name="">
<label for="checkbox1"> Item 1</label>
<br>
<input type="checkbox" id="checkbox2" name="">
<label for="checkbox2"> Item 2</label>
<br>
<input type="checkbox" id="checkbox3" name="">
<label for="checkbox3"> Item 3</label>
<br>
<input type="checkbox" id="checkbox4" name="">
<label for="checkbox4"> Item 4</label>
<br>
<input type="checkbox" id="checkbox5" name="">
<label for="checkbox5"> Item 5</label>
<br>

3
  • Até tinha feito com ids diferentes, mas achei muito poluído o arquivo CSS. Não teria como manter o estilo, sem poluir o css? 7/12/2017 às 23:33
  • As vezes é possível sim, principalmente se vc usar algum <script> que vai trabalhar com a Classe e não com o ID. Com CSS o que é comum de fazer é separa alguns elementos por vírgula tipo assim: { "#checkbox1+label:before, #checkbox2+label:before, etc..." Mas com CSS e usando <label for="ID> não tem como melhorar muito.
    – hugocsl
    7/12/2017 às 23:56
  • Entendi !! como é mais para exemplo, no primeiro momento vou usar esta solução. Obrigado pela força! 8/12/2017 às 20:19

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 .