post

Transformar um Checkbox do JetSmartFilter em Switch com CSS

Publicado 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;
}


Link de 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/2993

ID de Referência: 2993

Sugira uma publicação

Envie uma mensagem para mim, e sugira alguma publicação de algum tema que tenha dificuldades de resolver.

Clique aqui e entre em contato


Comentários