Checkbox Customizado com CSS para Formulário do Elementor (WordPress) - Bruno Devx - BR Criativus

post #5697

Checkbox Customizado com CSS para Formulário do Elementor (WordPress)

Publicado em: 24/09/2024 / Atualizado em: 24/09/2024

Categorias: BlogCSSElementorWordpress

Nesse post vou disponibilizar um trecho de código CSS para usar em formulários do Elementor, em campos do tipo checkbox, onde você pode customizar o botão nativo do navegador, para deixar com uma estética mais amigável e agradável.

Segue código CSS abaixo para copiar e colar em seu site:

.elementor-field-subgroup span {
    position: relative;
    display: flex;
    align-items: center;
}

.elementor-field-option input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #0d64cc !important;
    border-radius: 8px !important;
    background-color: white;
    cursor: pointer;
    position: relative;
    margin-right: 10px; 
}

.elementor-field-option input[type="checkbox"]:checked {
    background-color: #0d64cc !important;
    border-color: #0d64cc !important;
}

.elementor-field-option input[type="checkbox"]:checked::before {
    content: '✔'; 
    color: white;
    position: absolute;
    top: 4px;
    left: 10px;
    font-size: 16px;
}

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

ID de Referência: 5697

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