Código CSS Personalização Formulário RD Station - Bruno Devx - BR Criativus

post #6494

Código CSS Personalização Formulário RD Station

Publicado em: 27/10/2025 / Atualizado em: 24/02/2026

Categorias: BlogCSSRD Station

Código CSS básico para personalização e correção de layout do formulário RD Station para ser aplicado de maneira global no site.

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

.bricks--component-embeddable-form [id^="rd-column-"] .rd-form form input, .bricks--component-embeddable-form [id^="rd-column-"] .rd-form form select, .bricks--component-embeddable-form [id^="rd-column-"] .rd-form form .bricks-form__input:not(textarea) {
    height: 50px !important;
    border-radius: 8px !important;
}
  
.bricks--component-embeddable-form [id^="rd-column-"] .rd-form form input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    border-radius: 4px !important;
}

.bricks--component-embeddable-form [id^="rd-column-"] .rd-form form .bricks-form__field__option {
    margin-bottom: 6px !important;
}

.bricks--component-embeddable-form [id^="rd-column-"] .rd-form form .bricks-form__field__option > .bricks-form__label {
    display: flex !important;
    gap: 8px !important;
}
	
.bricks--component-embeddable-form [id^="rd-column-"] .rd-form form textarea {
    height: 120px !important;
    border-radius: 8px !important;
}

.bricks--component-embeddable-form [id^="rd-column-"] .rd-form form .bricks-form__field {
    display: flex;
    min-height: 80px;
    flex-direction: column;
    justify-content: flex-end;
}

.bricks--component-embeddable-form [id^="rd-column-"] .rd-form form label {
    font-weight: bold !important;
}

.bricks--component-embeddable-form [id^="rd-column-"] .rd-form form .select2-container .select2-choice {
    margin-top: 6px !important;
    padding-left: 12px !important;
    height: 48px !important;
    border-radius: 8px !important;
}

.bricks--component-embeddable-form [id^="rd-column-"] .rd-form form .select2-container .select2-choice .flag {
    margin-left: 8px !important;
    margin-top: 2px !important;
    border-radius: 4px !important;
}

.bricks--component-embeddable-form [id^="rd-column-"] .rd-form form .select2-chosen {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
}

.bricks--component-embeddable-form [id^="rd-column-"] .rd-form form .phone-country .select2-choice {
    margin-top: 0px !important;
    margin-left: 0px !important;
    height: 0px !important;
    border-radius: 0px !important;
}

.bricks--component-embeddable-form [id^="rd-column-"] .rd-form form .phone-country {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}

.bricks--component-embeddable-form [id^="rd-column-"] .rd-form form .select2-container-active .select2-choice, .bricks--component-embeddable-form [id^="rd-column-"] .rd-form form .select2-container-active .select2-choices {
    box-shadow: none !important;
    outline: none !important;
}

.bricks--component-embeddable-form [id^="rd-column-"] .rd-form form .select2-container .select2-choice {
    background: transparent !important;
}

.bricks--component-embeddable-form [id^="rd-column-"] .rd-form form .phone-input-group {
    background: #fff;
    border: 1px solid #ccc !important;
    border-radius: 8px !important;
}

.bricks--component-embeddable-form [id^="rd-column-"] .rd-form form .with-select-flags > .phone-input-group > .phone {
    border: none !important;
    margin-left: -54px !important;
}

.bricks--component-embeddable-form [id^="rd-column-"] .rd-form form .select2-container .select2-choice {
    margin-bottom: -12px !important;
}

.bricks--component-embeddable-form [id^="rd-column-"] .rd-form form span.select2-arrow {
    display: none !important;
}

.bricks--component-embeddable-form [id^="rd-column-"] .rd-form form ul.select2-results li div {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 24px !important;
}

.bricks--component-embeddable-form [id^="rd-column-"] .rd-form ul.select2-results li div .flag {
    width: 40px !important;
}
	
.bricks--component-embeddable-form [id^="rd-column-"] .rd-form form .bricks--component-button {
    background: var(--e-global-color-accent)!important;
    color: #fff !important;
    border: none !important;
	display: block !important;
}
</style>

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

ID de Referência: 6494

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