post #6417

Código CSS para Customizar Formulário RD

Publicado em: 09/09/2025 / Atualizado em: 12/09/2025

Categorias: BlogCSSRD Station

Código abaixo para customizar facilmente formulários da RD embutidos nos sites.

.bricks--component-embeddable-form [id^="rd-column-"] > div, .bricks--component-embeddable-form [id^="rd-section-"] {
    background-color: transparent !important;
}

.rd-form form input, .rd-form form select, .rd-form form textarea, .rd-form form .bricks-form__input:not(textarea) {
    height: 50px !important;
    border-radius: 8px !important;
}

.rd-form form .bricks-form__field {
    display: flex;
    height: 102px;
    flex-direction: column;
    justify-content: flex-end;
}

.rd-form form label {
    font-weight: bold !important;
}

.rd-form form .select2-container .select2-choice {
    margin-top: 6px !important;
    padding-left: 12px !important;
    height: 48px !important;
    border-radius: 8px !important;
}

.rd-form form .select2-container .select2-choice .flag {
    margin-left: 8px !important;
    margin-top: 2px !important;
    border-radius: 4px !important;
}

.rd-form form .select2-chosen {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
}

.rd-form form .phone-country .select2-choice {
    margin-top: 0px !important;
    margin-left: 0px !important;
    height: 0px !important;
    border-radius: 0px !important;
}

.rd-form form .phone-country {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}

.rd-form form .select2-container-active .select2-choice, .rd-form form .select2-container-active .select2-choices {
    box-shadow: none !important;
    outline: none !important;
}

.rd-form form .select2-container .select2-choice {
    background: transparent !important;
}

.phone-input-group {
    background: #fff;
    border: 1px solid #ccc !important;
    border-radius: 8px !important;
}

.rd-form form .with-select-flags > .phone-input-group > .phone {
    border: none !important;
    margin-left: -54px !important;
}

.rd-form form .select2-container .select2-choice {
    margin-bottom: -6px !important;
}

.rd-form form span.select2-arrow {
    display: none !important;
}

ul.select2-results li div {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 24px !important;
}

ul.select2-results li div .flag {
    width: 40px !important;
}

Publicações recomendadas:


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

ID de Referência: 6417

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