Changing the background of the warning message and the checkboxes

Hello @beho83

To modify the background of the validation dialogs, you can enter a block of styles similar to the following one into the “Customize Form Design” attribute in the “Form Settings” (https://resources.developers4web.com/cff/images/documentation/form-settings-tab.png)

form #fbuilder .fields .dfield div.cpefb_error{background:green !important;border-color:green !important;}
form #fbuilder .fields .dfield div.cpefb_error::after{border-bottom: 10px solid green !important;}

The checkbox and radio button are elements you cannot customize like other HTML tags. The alternative is to hide them and emulate their states:

#fbuilder .fields input[type="checkbox"],
#fbuilder .fields input[type="radio"]{display:none;}
#fbuilder .cff-radiobutton-field:not(.cff-switch-container) .dfield input+span::before,
#fbuilder .cff-checkbox-field:not(.cff-switch-container) .dfield input+span::before{content:"?";font-size:16px;line-height:16px;font-weight:bold;text-align:center;width:16px;height:16px;display:inline-block;background:white;color:white;margin-right:10px;}
#fbuilder .cff-radiobutton-field:not(.cff-switch-container) .dfield input+span::before{border-radius:20px;}
#fbuilder .cff-radiobutton-field:not(.cff-switch-container) .dfield input:checked+span::before,
#fbuilder .cff-checkbox-field:not(.cff-switch-container) .dfield input:checked+span::before{color:#3cce88;}

Best regards.

Thank you for your reply and the outstanding support!

Unfortunately, the validation dialogs do not work yet. The border is still in red and not in the color I specified. Even if I take over exactly your code, the background of the text field becomes green, but the border remains red. As a workaround I tried to set border:0px. But even then the red border remains.

Do you have any idea what this could be?

Your solution for the checkboxes is great. I really like the look of this!

Hello @beho83

Please, send me the URL to the page with the form to check your styles.

Best regards.

Hi @codepeople,

here is the URL: https://bit.ly/3qjs1q8

Thanks in advance!

Best
Ben

Hi @codepeople,

do you have any other ideas how to fix the problem with the red border (see on “Seite 2 von 6” if no “Gewünschte Wohnfl?che*” is specified)?

Thank you!
Ben

Hello @beho83

If you are referring to the border color of the entry tag and bubble, the style definition block would be similar to:

#fbuilder .fields .cpefb_error:not(input[type="checkbox"]):not(input[type="radio"]), #fbuilder .fields .cpefb_error+select, #fbuilder .fields  .cpefb_error+select+select, #fbuilder .fields  .cpefb_error+select+select+select{
    border: 1px solid green !important;
}

Best regards.

That’s it. Thank you very much!