Estilizar uma caixa de seleção usando CSS

Este tutorial irá apresentar um método para definir o estilo de uma caixa de seleção em CSS.

Use CSS para definir o estilo das caixas de seleção

Uma caixa de seleção é um elemento HTML usado para obter a entrada do usuário e é usado em quase todos os sites. Visto que a caixa de seleção padrão fornecida pelo navegador tem a mesma aparência em todos os outros sites, por que não estilizá-los? Embora seja um pouco complicado estilizá-los usando pseudoelementos como :before, :after, :hover e :checked, é possível estilizar uma caixa de seleção usando CSS.

Para aplicar estilo às caixas de seleção, usaremos apenas HTML e CSS, sem bibliotecas adicionais. Este método funciona bem em navegadores modernos. Pode haver muitas abordagens quando se trata de caixas de seleção de estilo. Podemos seguir esses princípios simples para atingir nosso objetivo. Podemos ocultar o controle de caixa de seleção padrão, que é estilizado pelo navegador e não pode ser substituído de nenhuma maneira significativa usando CSS. Com o controle oculto, ainda precisaremos detectar e alternar seu estado verificado. Podemos refletir o estado verificado da caixa de seleção definindo o estilo de um novo elemento.

Os princípios acima podem ser aplicados usando métodos diferentes, e não há uma abordagem certa ou errada única. Neste tutorial, primeiro envolveremos a caixa de seleção em um elemento div. Isso significa que mesmo se o controle da caixa de seleção estiver oculto, ainda podemos alternar seu estado de seleção clicando em qualquer lugar dentro do div. Então, podemos ocultar a caixa de seleção e adicionar um novo elemento após a caixa de seleção, que podemos estilizar de acordo. O elemento deve aparecer após a caixa de seleção para ser selecionado e estilizado de acordo com o estado :checked. A pseudoclasse em CSS é usada para definir o estilo de um elemento específico, definindo um estado específico para o elemento. Aqui, estamos usando alguns pseudo-elementos. O seletor :before insere algo antes do conteúdo de cada elemento selecionado. O seletor :checked corresponde a cada elemento <input> verificado.

Em HTML, a caixa de seleção está dentro da tag <label>. A principal função do elemento <span> é fazer referência à caixa de seleção posteriormente no CSS.

Em CSS, a propriedade display especifica o comportamento de exibição (o tipo de caixa de renderização) de um elemento. Em nosso caso, é definido como none, o que remove completamente o elemento <input> dentro da tag <label>, ou seja, nossa caixa de seleção padrão. Usamos as propriedades height, width e border para gerar a caixa de seleção personalizada. As propriedades CSS height e width definem a altura e a largura de um elemento. A propriedade CSS border permite especificar o estilo, a largura e a cor da borda de um elemento. A propriedade display especifica o comportamento do display. O valor embutido exibirá o elemento como embutido. A propriedade position especifica os tipos de posicionamento usados ​​para um elemento para definir nossa nova caixa de seleção.

O pseudo-elemento :before é usado para inserir nosso conteúdo antes do elemento <span>. O seletor :checked corresponde a cada elemento verificado, o que significa que quando nossa caixa de seleção é marcada, novos conteúdos serão injetados antes do elemento <span> uma vez que estamos usando o seletor :before. Eles suportam a propriedade content, que permite injetar ícones Unicode. O valor da propriedade CSS content:'\2714' representa um ícone de marca de seleção.

Código de exemplo:

<label>
    <input type='checkbox'>
    <span></span>
    Click Me
</label>

label input {
    display: none; 
}

label span {
    height: 10px;
    width: 10px;
    border: 1px solid grey;
    display: inline-block;
    position: relative;
}

[type=checkbox]:checked + span:before {
    content: '\2714';
    position: absolute;
    top: -5px;
    left: 0;
}