Todos posts

Input Checkbox usando CSS

As vezes queremos só estilizar um checkbox, por n motivos, seja pra seguir protótipo, seja pra seguir um tema já definido, ou apenas sem motivo nenhum. Porém com as facilidades de bibliotecas de componentes, frameworks e afins, as vezes esquecemos que com um simples ::pseudo selector do CSS já é provável atingirmos nosso objetivo, e tudo isso sem carregar 200kb a mais de componentes que não utilizaríamos.

Photo by Andrej Lišakov on Unsplash

Considerando o seguinte componente de checkbox:

<label> <input type="checkbox" name="agree" /> I Agree </label>

Podemos adicinar o estilo a todos nossos checkbox so site da seguinte forma:

input[type='checkbox']::before {
  content: ' ';
  width: inherit;
  height: inherit;
  position: absolute;
  background-color: #fff;
  border: 1px solid #bf360c;
}
input[type='checkbox']:checked::after {
  content: ' ';
  width: 0.2rem;
  height: 0.5rem;
  margin-left: 0.3rem;
  border-color: #bf360c;
  border-style: solid;
  border-width: 0 3px 3px 0;
  position: absolute;
  transform: rotate(45deg);
}

O que aconteceu?

O uso de ::pseudo selectors aliado a :sub selectors eleva e muito a possibilidade de estilização de estados de um componente.

Com o uso de ::before e ::after podemos ‘simular’ um pseudo elemento antes ou depois do elemento na árvore DOM. No exemplo, estamos ‘criando’ um elemento antes da caixa de checkbox, porém estamos definindo um position: absolute para que ele fique a frente da caixa de checkbox padrão.

Definimos para esse elemento a mesma largura e altura da caixa de seleção, porém setamos um background e uma borda provavelmente diferente do padrão do Browser para as caixas de checkbox (Sim, cada Browser renderiza uma caixa de checkbox de maneira diferente, vai lá, faz o teste).

Ao selecionar o checkbox (input[type=‘checkbox’]:checked) definimos então a criação de outro pseudo elemento (::after { content: ” }) porém dessa vez usando de propriedades do CSS para criarmos nosso próprio check!


Vlw e até a próxima!!