Checkbox estilizado com HTML e CSS puro
Checkbox (caixa de seleção) estilizado com personalização de cores e tamanho
A tag de <input type="checkbox">, ou caixa de seleção, original do HTML é meio... pequena e feia
Podemos personalizar todos os checkboxes da nossa página para deixar com a estética mais próxima dos outros componentes
Lembrando que podemos indicar um rótulo <label> para o checkbox <input type="checkbox"> para contextualizar o recebimento de dados, apenas informando
<input id="banana" type="checkbox" /><label for="banana">Banana</label>Aplicando seguinte estilo para todos os checkbox da página
/* Caixa para o marcador */
input[type="checkbox"] {
appearance: none;
position: relative;
/* Tamanho */
width: 1.125rem;
height: 1.125rem;
/* Cor do fundo e borda */
background-color: #fff;
border: 0.125rem solid #ccc;
border-radius: 0.25rem;
}
/* Características do marcador */
input[type="checkbox"]::before {
content: "";
/* Posicionar no meio */
position: absolute;
top: 50%;
left: 50%;
/* Tamanho do marcador */
width: 0.75rem;
height: 0.75rem;
/* Formato do marcador */
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
/* Posicionar no meio */
transform: translate(-50%, -50%) scale(0);
transform-origin: center;
transition: 0.125s transform ease-in-out;
/* Cor do marcador */
box-shadow: inset 1rem 1rem #fff;
}
/* Cor da caixa para o marcador */
input[type="checkbox"]:checked {
background-color: #e0138c;
border-color: #e0138c;
}
/* Características do marcador quando selecionado */
input[type="checkbox"]:checked::before {
transform: translate(-50%, -50%) scale(1);
}
/* Características do marcador quando selecionado */
input[type="checkbox"]:disabled {
opacity: 0.25;
}
input[type="checkbox"]:focus {
border-color: #e0138c;
}
input[type="checkbox"]:focus + label {
color: #e0138c;
}Aplicando o CSS Nest que está com grande aceitação pelos navegadores
input[type="checkbox"] {
appearance: none;
position: relative;
width: 1.125rem;
height: 1.125rem;
background-color: #fff;
border: 0.125rem solid #ccc;
border-radius: 0.25rem;
&::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0.75rem;
height: 0.75rem;
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
transform: translate(-50%, -50%) scale(0);
transform-origin: center;
transition: 0.125s transform ease-in-out;
box-shadow: inset 1rem 1rem #fff;
}
&:checked {
background-color: #e0138c;
border-color: #e0138c;
&::before {
transform: translate(-50%, -50%) scale(1);
}
}
&:disabled {
opacity: 0.25;
}
&:focus {
border-color: #e0138c;
& + label {
color: #e0138c;
}
}
}Ou substituindo [type="checkbox"] pelo seletor de classe, como input.custom-checkout, e aplicando no atributo class na tag
