post #4624
Transformando Checkbox em Switch Personalizado nos Formulários do WordPress com Elementor
Publicado em: 06/03/2024 / Atualizado em: 21/03/2024
Para transformar visualmente o checkbox em switches sem alterar a estrutura HTML do formulário Elementor, você pode usar um pouco de código CSS personalizado, como mostra a imagem abaixo:
Abaixo está um exemplo de como você pode fazer isso. Esse método mantém a estrutura HTML do formulário Elementor original intacta, mas usa CSS para ocultar o checkbox e adicionar a funcionalidade de um switch.
.elementor-field-type-checkbox > label {
margin-bottom: 10px;
}
.elementor-field-type-checkbox .elementor-field-option {
margin: 6px 0;
}
.elementor-field-type-checkbox .elementor-field-option input[type=checkbox] {
display: none !important; /* Oculta o checkbox */
}
.elementor-field-type-checkbox .elementor-field-option input[type=checkbox] + label {
position: relative;
padding-left: 60px;
cursor: pointer;
}
.elementor-field-type-checkbox .elementor-field-option input[type=checkbox] + label::before, .elementor-field-option input[type=checkbox] + label::after {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.elementor-field-type-checkbox .elementor-field-option input[type=checkbox] + label::before {
left: 0;
width: 50px;
height: 24px;
background-color: #ccc; /* Cor do fundo quando desabilitado */
border-radius: 12px;
}
.elementor-field-option input[type=checkbox]:checked + label::before {
background-color: #0001ff; /* Cor do fundo quando habilitado */
}
.elementor-field-type-checkbox .elementor-field-option input[type=checkbox] + label::after {
left: 4px;
width: 16px;
height: 16px;
background-color: white;
border-radius: 50%;
transition: all 0.3s;
}
.elementor-field-type-checkbox .elementor-field-option input[type=checkbox]:checked + label::after {
transform: translateY(-50%) translateX(26px);
}Com o CSS acima, a mudança de estado do checkbox já alterará a posição do pseudo-elemento, simulando o comportamento do switch. Assim, não é necessário JavaScript adicional para alterar o estado, já que o comportamento do label associado ao input faz com que o clique altere o estado do checkbox.
Este código CSS oculta os checkboxes originais e os substitui visualmente por switches. Quando o usuário clica no switch (que é tecnicamente o label do checkbox), o checkbox é marcado ou desmarcado como normalmente, mas a representação visual é de um switch deslizando para a posição ligado ou desligado.
Graças à relação entre o label e o checkbox (definida pelo atributo for no label), a funcionalidade básica do switch é mantida sem a necessidade de modificar a estrutura HTML original.
Publicações recomendadas:
Link Direto
Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link direto abaixo. Basta copiar.
bruno.art.br/?p=4624
ID de Referência: 4624
Sugira uma publicação
Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.