post #4624

Transformando Checkbox em Switch Personalizado nos Formulários do WordPress com Elementor

Publicado em: 06/03/2024 / Atualizado em: 21/03/2024

Categorias: BlogCSSElementorWordpress

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:

image 9
ANTES DO CÓDIGO CSS
image 8
DEPOIS DO CÓDIGO CSS

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:

Inscreva-se em Nossa News:

Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.

Bruno Devs News

Link Curto para Compartilhamento

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.

bruno.art.br/pb/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.

Clique aqui e entre em contato