post
Transformar um Checkbox do JetSmartFilter em Switch com CSS
Publicado em: 25/07/2023
.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.