Dicas de edição e configuração gráfica de checkboxes diretamente por CSS
Olá, caros amigos!
Os checkboxes tem sido — e provavelmente continuarão sendo durante bastante tempo — elementos muito utilizados na elaboração e apresentação de formulários onde se necessita de uma resposta booleana para alguma questão. Estas questões podem ser referentes a filtros em compras de imóveis, em aluguel de veículos, entre outros exemplos.
Muitos estudantes ou profissionais de TI, ao longo do tempo, já se depararam com um cenário onde tinha-se a necessidade de desenvolver um elemento booleano com o objetivo de responder a alguma indagação. Em momentos como este, é importante, além de atender à necessidade do negócio, encontrar soluções criativas que apresentem um resultado de excelência.
Salienta-se que este artigo tem como objetivo apresentar 3 formas de edição e configuração gráfica de checkboxes, não se atendo a dicas de estilização. A seguir, apresentam-se 3 maneiras de efetuar a edição de checkboxes diretamente por CSS:
1. Scale
Uma das maneiras mais simples de editar um checkbox, de modo a apresentar este elemento, neste caso, em uma forma discretamente diferente da original, consiste em, simplesmente, alterar o tamanho dele. Isto pode ser feito com o uso do atributo scale, vide exemplo abaixo:
O scale atua diretamente sobre o elemento input, ou seja, sobre o checkbox em si. Cabe lembrar que, conforme apresentado, o scale precisa ser utilizado juntamente com o transform, para o correto resultado.
2. Label
Para apresentar esta maneira de edição de checkboxes, considera-se o seguinte código HTML:
Esta forma de edição consiste em utilizar diretamente os elementos label, apresentados no exemplo. Já que o label é tido como uma parte de todo o campo, ele vai substituir o input. É importante ressaltar que o atributo for, do label, deve apontar para o id do referido input, de maneira a garantir o correto funcionamento da aplicação.
Neste exemplo, utiliza-se uma imagem que disponibiliza todos os elementos que serão utilizados durante o funcionamento. A imagem utilizada é a apresentada a seguir:
As instruções que precisam ser seguidas são:
· Esconder os inputs;
· Setar a imagem, que será apresentada nos checkboxes, como background;
· Configurar a parte da imagem que será apresentada pelo label quando o input estiver selecionado e quando ele não estiver selecionado.
Resultado:
3. After e Before
A principal diferença entre esta forma de edição e a forma anterior é que, além de não ser preciso utilizar uma imagem como background, a presente maneira trabalha em cima dos pseudo-elementos after e before. Já a maneira apresentada anteriormente trabalha diretamente com o elemento label.
Para esta maneira de edição, considera-se o mesmo código HTML utilizado na forma apresentada anteriormente. Além disso, mantém-se a instrução de esconder os inputs. O pseudo-elemento before foi utilizado, embora possa-se utilizar o pseudo-elemento after, de acordo com a necessidade.
As instruções são as seguintes:
· Definir a forma de apresentação do checkbox não selecionado;
· Definir a forma de apresentação do checkbox selecionado.
Resultado:
É importante ressaltar a importância, para este exemplo, do atributo content, visto que ele é o responsável por definir, neste caso, o caractere de apresentação para quando o checkbox for selecionado e quando não for selecionado. Nas duas imagens utilizadas, nota-se a presença de unicodes, fundamentais para o resultado.
