Como estilizar Checkbox com CSS

INTRODUÇÃO

Uma coisa muito comum na maioria dos sites são os formulários, e normalmente eles não são muito atrativos, dificilmente achamos um formulário bonitinho que dê vontade de preencher, não é?

Sabem aqueles quadradinhos que quando clicamos eles ficam com um ✓, o famoso checkbox? Não seria interessante se conseguíssemos alterá-los para que ficassem mais legais? Como será que podemos estilizá-los para que essa parte do formulário fique mais atrativa?

Uma maneira rápida é usar qualquer framework que tenha a funcionalidade de estilizar formulários, como por exemplo o Bootstrap. Mas como esses frameworks trabalham para que isso seja possível?

Essa é a ideia deste post, mostrar como é possível estilizar o checkbox usando o CSS, sem frameworks prontos.

COMO CONSTRUIR O HTML

Vamos primeiro montar o HTML com o checkbox. Para isso vamos adicionar a tag input com o atributo type=”checkbox”. Para nosso exemplo, criaremos quatro inputs e suas respectivas descrições.

Figura 01: Criando o HTML

Agora que os checkboxs e suas respectivas descrições estão criados, será que quando clicarmos em cima da descrição conseguiremos selecionar o checkbox? Ou para selecionar o item precisaremos clicar somente dentro do quadradinho pequeno?

Infelizmente, da maneira que criamos o HTML, só conseguiremos selecionar o item desejado quando clicarmos dentro do checkbox, e isso é ruim. Seria mais prático se conseguíssemos clicar dentro do checkbox ou na descrição do item e o check já aparecesse no quadradinho. Será que isso é possível?

Opa!!! É possível sim, precisamos “ligar” a tag input com a sua descrição de algum jeito. Assim, quando clicarmos tanto no input, quanto na descrição, estaremos selecionando a mesma informação. Então, como podemos conectar o input com a sua descrição correspondente?

Para fazer a ligação entre a tag input e sua descrição, precisamos primeiro colocar a descrição dentro de alguma tag, não deixando ela solta no HTML. Mesmo assim, essas tags ainda não estariam conectadas, precisamos “ligá-las” dando o mesmo “nome” para as duas tags.

Vamos utilizar a tag label para colocar as descrições, porque essa tag possui um atributo chamado FOR que pode ser conectado com o atributo ID da tag input. Com esses dois atributos com o mesmo “nome”, conseguimos conectar as duas tags, input e label. Isso significa que quando clicarmos no checkbox ou na descrição correspondente, estamos selecionando a mesma informação. Vamos ver como ficou o HTML completo.

Figura 02: Conectando cada checkbox com sua respectiva descrição

Vamos verificar como ficou o resultado do HTML no navegador, lembrando que não adicionamos nenhum CSS, somente o HTML puro, com os estilos padrões de cada navegador.

Figura 03: Resultado do HTML sem CSS

TENTANDO ESTILIZAR A TAG INPUT

Com o HTML pronto, podemos verificar que quando não temos nenhum CSS, o formato do checkbox fica bem simples, por isso, vamos tentar estilizar a tag input para deixar os quadradinhos bonitinhos. Vamos primeiro aumentar as dimensões do checkbox.

Figura 04: CSS para aumentar as dimensões do checkbox

CSS implementado, vamos verificar no navegador o resultado.

Figura 05: Resultado do CSS com o checkbox maior

Opa!!! Os quadradinhos estão maiores, parece que funcionou fazer as alterações direto na tag input. Vamos tentar mais uma alteração, além de aumentar as dimensões do checkbox, vamos colocar um fundo vermelho.

Figura 06: CSS com adição de fundo vermelho

Vamos para o navegador para ver como ficou os nossos quadradinhos com mais essa alteração.

Figura 07: Resultado do CSS com adição de fundo vermelho

Ops!!! Não mudou nada? Será que eu colei aqui a figura errada?

Não!!! Não colei a figura errada, é isso mesmo. O navegador não entendeu a propriedade de fundo vermelho para a tag input, mas entendeu as alterações das dimensões. Mas como assim?

Para entender melhor, vamos analisar o Dev Tools do navegador para verificar se o nosso CSS foi realmente entendido.

Figura 08: Dev Tools do navegador

Como podemos perceber, o CSS está correto e aparecendo no Dev Tools, o navegador consegue ler corretamente as alterações do CSS, sem erros, mas o checkbox continua com a cor de fundo padrão. E sabe porque? Porque a tag input não aceita todas as configurações possíveis do CSS, só algumas poucas propriedades que nos limitam muito em deixar esses quadradinhos mais legais.

Por isso, precisamos pensar em outro jeito de estilizar o checkbox sem ser direto na tag input. Mas como podemos fazer isso?

MÃOS À OBRA

Como vimos anteriormente, o checkbox padrão da tag input não aceita grandes alterações ou estilizações mais complexas, então, para começar, precisamos “tirá-lo” do nosso formulário. Para que ele não atrapalhe mais no documento, podemos usar no CSS a propriedade display com valor none, tornando assim o checkbox invisível.

Figura 09: CSS para deixar o checkbox padrão invisível

Agora não estamos mais vendo o checkbox, estamos somente com as descrições nas tags label. Lembrando que como conectamos as tags input com suas tags label, pelo ID e FOR, respectivamente, mesmo que o input esteja invisível, podemos clicar na label que estaremos selecionando também o input “escondido”.

Vamos estilizar as descrições um pouco, só para começar a dar uma cara mais legal para nosso formulário. Vamos alterar o nome e tamanho da fonte, adicionar espaçamentos (como margin e padding), alterar o formato do cursor para indicar que o elemento pode ser interagido clicando nele (normalmente, é uma imagem de uma mão) e, por último, alterar o display para block para que as descrições fiquem uma embaixo da outra.

Figura 10: CSS para estilizar a label

Depois de adicionados esses dois CSS, podemos dar um break e conferir no navegador como está o resultado do nosso projeto até aqui.

Figura 11: Checkbox invisível e descrição estilizada

Até o momento, nosso CSS deixou as descrições mais bonitas e escondeu o checkbox, mas, do jeito que está, como o usuário vai saber que isso é uma lista de itens que podem ser selecionados? Precisamos colocar alguma coisa na frente das descrições para demonstrar o check nas opções.

Temos algumas maneiras para fazer isso, podemos adicionar vários desenhos que representem um checkbox. Aqui vou mostrar como fazer dois quadrados no lugar do input, que quando clicarmos neles ou na descrição, o quadrado de dentro fique com fundo pintado, mostrando que o item foi selecionado. A ideia é chegar nesse resultado final.

Figura 12: Resultado final

Hum!!! A ideia de adicionar esses quadrados antes das descrições parece boa, mas como adicionamos coisas pelo CSS? E onde vamos adicionar isso?

O CSS possui algumas funcionalidades que são chamadas de pseudo-elementos, palavras-chave adicionada a um seletor que nos permite marcar uma parte específica do elemento selecionado. Existem vários pseudo-elementos, no nosso exemplo vamos utilizar o ::before e o ::after.

What??? O que é esse treco? Como usar? Onde adicionar?

Muita calma nessa hora… Vamos primeiro entender o que são esses fulanos de pseudo-elementos ::before e ::after e depois implementaremos no nosso exemplo.

O QUE É PSEUDO-ELEMENTO ::BEFORE E ::AFTER?

Os pseudo-elementos ::before e ::after nos dão a possibilidade de inserir elementos antes e depois do conteúdo de uma tag. Eles podem ser usados de diversas formas, para aspas mais bonitas em citações, para adicionar ícones em botões, para estilizar itens, entre outras várias possibilidades.

Vamos a um exemplo simples de como podemos usar o ::before, só para pegar o jeito da coisa e ficar mais tranquilo de usar no nosso objetivo principal.

Nesse exemplo vamos colocar o desenho de um coração no começo de um parágrafo.

Figura 13: HTML para adicionar um parágrafo
Figura 14: CSS para adicionar um elemento na frente da tag

Com esse HTML e CSS, podemos ver no navegador o resultado do pseudo-elemento ::before.

Figura 15: Resultado visto no navegador

Hum!!! Então sempre que quisermos adicionar algum elemento pelo CSS, podemos usar os pseudo-elementos ::before ou ::after. Com isso conseguimos adicionar os nossos quadradinhos para estilizar o checkbox do jeito que queremos.

CHECKBOX ESTILIZADO

Agora que já aprendemos a usar o ::before e o ::after, podemos voltar ao nosso CSS e completá-lo para atingir o nosso objetivo final. Mas vamos por partes para entender muito bem o que estamos fazendo e para que possamos fazer o mesmo processo com qualquer outro tipo de desenho depois.

O nosso objetivo é adicionar dois quadrados de tamanhos diferentes, um dentro do outro e quando clicarmos nos quadrados ou na descrição, o quadrado de dentro (o menor) ficará preenchido para representar que o item foi selecionado.

Vamos criar esses elementos na tag label, por que nela? Lembrem-se, conectamos a tag input com a tag label e quando clicamos na label, mesmo com o input invisível, estamos selecionando o mesmo item. Então como já escondemos o input, vamos adicionar os elementos na tag label.

Portanto, vamos colocar o quadrado maior antes da descrição, usando o ::before e o quadrado menor depois da descrição, usando o ::after.

Figura 16: CSS com os pseudo-elementos ::before e ::after

Adicionamos os dois quadrados, vamos ver no navegador o resultado com a adição desse CSS.

Figura 17: Resultado da criação dos pseudo-elementos

Opa!!! Conseguimos adicionar elementos usando o CSS, nossos quadradinhos já estão aparecendo no navegador. Agora, só precisamos arrumar o posicionamento deles para que o quadrado menor fique dentro do quadrado maior.

Figura 18: Posicionando os quadrados

Vamos olhar no navegador se os quadrados que fizemos para estilizar o checkbox já estão como queríamos.

Figura 19: Checkbox do jeito que queríamos

Opa!!! Vejam como já estão bem melhores os nossos quadradinhos! Agora já temos um dentro do outro e na frente de cada descrição.

Para finalizar, está faltando só uma coisinha muito importante. Quando clicarmos nos quadrados ou na respectiva descrição, temos que pintar o quadrado menor para que fique claro que o item foi selecionado. Vamos adicionar esse item no CSS.

Figura 20: Clicando no item desejado

Agora sim!!! Nosso CSS está completo e chegamos ao resultado desejado.

Figura 21: Resultado Final

Bem melhor assim do que a versão sem CSS, não acham? O que vocês preferem, os quadradinhos padrões e feios ou esses bem mais bonitinhos?

No link codepen.io/andrezaluchini, vocês podem encontrar o código completo de tudo isso que ensinei aqui, tanto do HTML quanto do CSS.

CONCLUSÃO

Com os pseudo-elementos ::before e ::after conseguimos criar muitas estilizações diferentes e personalizar muito mais qualquer parte do nosso site, não somente os formulários.

Outra estilização legal que pode ser feita com esse mesmo processo é o desenho , muito usado nos Apps dos Androids.

Fica a dica para tentar refazer o código para que o desenho fique parecido com esse, que tal?

Uma resposta para “Como estilizar Checkbox com CSS”

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *