Design,Tutoriais - 15 de dezembro de 2018

Input Checkbox Switch ON / OFF apenas com CSS3

O CSS é o mecanismo utilizado pelos navegadores para informar a estes como deve ser exibido determinado elemento HTML. Desde a versão 3 muitas coisas novas permitiram que a web fosse cada vez bonita e funcional.

Eu estava um pouco cansado do trabalho e para relaxar fiquei pensando em uma solução simples para simular um Switch ON/OFF que pudesse ser aplicado no lugar de um checkbox. E, para isso, usei simplesmente CSS3 e pseudoclasses:

Basicamente, pseudoclasses nos permitem adicionar instruções específicas de acordo com determinados comportamentos ou condições dos elementos HTML. Neste pequeno exemplo, eu usei a pseudoclasse :checked, para verificar se está marcado ou não, e as que adicionam complementos antes e depois do elemento, são as :before e :after, respectivamente.

Mas o que você quer mesmo é o código, então para ficar fácil de você pegar, basta clicar visualizar o exemplo abaixo no JsFiddle:

Agora, se tudo o que você quer é o código puro, segue abaixo:

HTML e CSS

<div class="check-radio">
  <input type="checkbox"/>
</div>
xxxxxxxxxx
 
0
<div class="check-radio">
1
  <input type="checkbox"/>
2
</div>

/**
* CSS do componente
**/
.check-radio{
  position: relative;
}

.check-radio input{
  -webkit-appearance: none;
  appearance: none;
  background-color: #eee;
  width: 40px;
  height: 15px;
  border-radius: 10px;
  box-shadow: inset 0 1px 5px rgba(0,0,0,.5);
}

.check-radio input:focus{
  outline: none;
  cursor: pointer;
}

.check-radio input:before{
  content: '';
  margin-top: -2.5px;
  display: block;
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px #333, 0 2px 5px rgba(0,0,0,.5);
  position: absolute;
  left: 0;
  transition: left .3s ease-out;
  -webkit-transition: left .3s ease-out;
}

.check-radio input:after{
  content: 'FF';
  display: block;
  margin-top: -2.5px;
  left: 20px;
  position: absolute;
  font-size: 14px;
  font-weight: bold;
  transition: left .3s ease-out;
  -webkit-transition: left .3s ease-out;
  color: #666;
}

.check-radio input:checked{
  background-color: lime;
}

.check-radio input:checked:before{
  left: 22.5px;
  box-shadow: inset 0 0 0 2px green, 0 2px 5px rgba(0,0,0,.5);
}

.check-radio input:checked:after{
  content: 'N';
  left: 43.5px;
  color: green;
}
xxxxxxxxxx
 
0
/**
1
* CSS do componente
2
**/
3
.check-radio{
4
  position: relative;
5
}
6
7
.check-radio input{
8
  -webkit-appearance: none;
9
  appearance: none;
10
  background-color: #eee;
11
  width: 40px;
12
  height: 15px;
13
  border-radius: 10px;
14
  box-shadow: inset 0 1px 5px rgba(0,0,0,.5);
15
}
16
17
.check-radio input:focus{
18
  outline: none;
19
  cursor: pointer;
20
}
21
22
.check-radio input:before{
23
  content: '';
24
  margin-top: -2.5px;
25
  display: block;
26
  width: 20px;
27
  height: 20px;
28
  background-color: white;
29
  border-radius: 50%;
30
  box-shadow: inset 0 0 0 2px #333, 0 2px 5px rgba(0,0,0,.5);
31
  position: absolute;
32
  left: 0;
33
  transition: left .3s ease-out;
34
  -webkit-transition: left .3s ease-out;
35
}
36
37
.check-radio input:after{
38
  content: 'FF';
39
  display: block;
40
  margin-top: -2.5px;
41
  left: 20px;
42
  position: absolute;
43
  font-size: 14px;
44
  font-weight: bold;
45
  transition: left .3s ease-out;
46
  -webkit-transition: left .3s ease-out;
47
  color: #666;
48
}
49
50
.check-radio input:checked{
51
  background-color: lime;
52
}
53
54
.check-radio input:checked:before{
55
  left: 22.5px;
56
  box-shadow: inset 0 0 0 2px green, 0 2px 5px rgba(0,0,0,.5);
57
}
58
59
.check-radio input:checked:after{
60
  content: 'N';
61
  left: 43.5px;
62
  color: green;
63
}

Por hoje é só… esse post foi rapidinho… Se gostou, compartilhe e nos siga nas redes sociais. VelhoBit, no Facebook, Twitter e Instagram.

Rodrigo Portillo

Gosto tanto de design que aprendi programação e regras para garantir a estabilidade de meus projetos. Trabalho e trabalhei com desenvolvimento full-stack em diversas linguagens, como Flex, PHP, Java, Javascript, dentre outras. Ainda trabalhei alguns anos como designer gráfico e ilustrador.
Busque mais informaçoes pelo LinkedIn.

Velho Bit

HTML e CSS

Rodrigo Portillo