0

Estou tentando deixar o checkbox dessa forma:

inserir a descrição da imagem aqui

Mas não estou conseguindo deixar como padrão o fundo cinza, e somente quando for marcado ficará azul.

Segue meu codigo:

input[type=checkbox] {
  position: relative;
  cursor: pointer;
}

input[type=checkbox]:before {
  content: "";
  display: block;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  left: 0;
  background-color: #2196F3;
}

input[type=checkbox]:checked:after {
  content: "";
  display: block;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 5px;
  left: 9px;
}
span{
  margin: 0px 15px;
}
<p> <input type="checkbox"> <span>Um</span> </p>

<p> <input type="checkbox"> <span>Dois</span> </p>

<p> <input type="checkbox"> <span>Tres</span> </p>

<p> <input type="checkbox"> <span>Quatro</span> </p>

1
  • Eu faço,colocar o azul no checkbox marcado e desmarcados com variação de cinza. O problema que no V8 tem um bug que não permite inserir corretamente seletores complexos na pseudo-classe :nth-of-type() que usaria para gerar um tom de cinza mais claro para cada checkbox. Significa que respondo a pergunta mas o código não é automático, se você adicionar mais um checkbox vai ter que reescrever o CSS para esse checkbox. Commented 22/02/2020 às 0:30

2 Respostas 2

3

O <input type="checkbox"> permite pouca customização via CSS. O exemplo passado na resposta aceita não funciona no Firefox e no Edge, por exemplo. O Chrome renderiza-o, mas não deveria, pois <input> é uma tag sem conteúdo, portanto não é passível de ter os pseudo-elementos ::before e ::after.

Se você quer uma solução mais robusta, crie um container em volta do checkbox e rótulo e faça o seu próprio desenho com CSS, desta forma:

<div class="checkbox">
  <input type="checkbox" id="chk1" class="checkbox" name="chk">
  <label for="chk1">
    Checkbox 1
  </label>
</div>
.checkbox {
  display: inline-block;
  vertical-align: middle;
}
.checkbox input {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.checkbox label {
  position: relative;
  padding-left: 2.2em;
  display: inline-block;
}
.checkbox label::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 1.5em;
  width: 1.5em;
  background: #FFF;
  margin-right: 0.5em;
  border: 1px solid #999;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
}
.checkbox label::after {
  content: "\2713";
  position: absolute;
  top: 50%;
  left: 0.75em;
  transform: translate(-50%, -50%);
  font-size: 1em;
  color: #FFF;
  opacity: 0;
  transition: all 0.2s ease;
}
.checkbox label:focus::before, .checkbox label:hover::before {
  background: #DDD;
}
.checkbox input:checked + label::before {
  background: #ff7212;
  border-color: #ff7212;
}
.checkbox input:checked + label::after {
  opacity: 1;
}

Live demo: https://jsbin.com/fuhuwun/1/edit?html,css,output

0

you can do it like that

input[type=checkbox] {
         position: relative;
	       cursor: pointer;
    }
    input[type=checkbox]:before {
         content: "";
         display: block;
         position: absolute;
         width: 20px;
         height: 20px;
         top: 0;
         left: 0;
         background-color:#e9e9e9;
}
input[type=checkbox]:checked:before {
         content: "";
         display: block;
         position: absolute;
         width: 20px;
         height: 20px;
         top: 0;
         left: 0;
         background-color:#1E80EF;
}
    input[type=checkbox]:checked:after {
         content: "";
         display: block;
         width: 5px;
         height: 10px;
         border: solid white;
         border-width: 0 2px 2px 0;
         -webkit-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
         transform: rotate(45deg);
         position: absolute;
         top: 2px;
         left: 6px;
}
<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">
<input type="checkbox" name="a">

1
  • To use with radio, simply change input[type=checkbox] to input[type=radio]?
    – Tiago
    Commented 22/02/2020 às 12:53

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 .