Transformar um Checkbox do JetSmartFilter em Switch com CSS - Bruno Devx - BR Criativus

post #2993

Transformar um Checkbox do JetSmartFilter em Switch com CSS

Publicado em: 25/07/2023 / Atualizado em: 25/07/2023

Categorias: BlogCSSJetEngineJetSmartFilterWordpress 
.jet-checkboxes-list__input {
    display: none; 
}

.jet-checkboxes-list__button {
    background-color: #ccc; 
    width: 40px; 
    height: 20px; 
    border-radius: 20px; 
    cursor: pointer;
    display: inline-block;
    position: relative;
}

.jet-checkboxes-list__button::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px; 
    background-color: #fff; 
    border-radius: 50%;
    transition: transform 0.3s ease; 
}

.jet-checkboxes-list__input:checked + .jet-checkboxes-list__button {
    background-color: #4CAF50;
}

.jet-checkboxes-list__input:checked + .jet-checkboxes-list__button::before {
    transform: translateX(20px); 
    background-color: #fff;
}

span.jet-checkboxes-list__decorator,
span.jet-checkboxes-list__label {
    display: none;
}

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=2993

ID de Referência: 2993

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