post

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:


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/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


Comentários