Changing the colour of error messages on forms

Site URL: https://pineapple-maroon-hpja.squarespace.com/home

My client has just asked whether it is possible to change the colour of the error messages on the forms (on incorrect form submissions) to another colour. Has anyone had any experience with this? 

Hoping to change the colour to #768D99

Add to Home > Design > Custom CSS

/* Field error background */
.field-error {
    background-color: #768D99;
}

Thanks @tuanphan - has worked perfectly!

I'm wondering how this worked after some time? I got this warning when attempting to make the change...
Warning: Adding custom CSS to your site can break your design. Please use caution when using this feature. Our support team will be limited in their ability to help you with design related issues if you have custom CSS.

On 6/9/2022 at 8:09 AM, ChrisFil said:

I'm wondering how this worked after some time? I got this warning when attempting to make the change...
Warning: Adding custom CSS to your site can break your design. Please use caution when using this feature. Our support team will be limited in their ability to help you with design related issues if you have custom CSS.

That is default message in Custom CSS. Don't care it.

@tuanphan This worked perfectly for the error blocks but not the error text on it's own, any idea how to fix that too? 

On 4/26/2023 at 9:49 PM, posyrae said:

@tuanphan This worked perfectly for the error blocks but not the error text on it's own, any idea how to fix that too? 

Can you share link to this page? We can check easier

On 4/26/2023 at 9:49 PM, posyrae said:

@tuanphan This worked perfectly for the error blocks but not the error text on it's own, any idea how to fix that too? 

With error text, use this code

.field-error {
    background-color: #94195f;
    color: #f1f;
}

Hello 

I have the same issue like above but unfortunately, the code doesn't work for me.
Not sure what I'm doing wrong. (https://www.mulle-legal.ch/kontakt)

Anyway, preferably, I would like to change the default red colour of the error boxes into an outlined version as in the image attached. 

Could someone please help me out? 
Thank you very much!
Natasa

18 minutes ago, hello_studiofrey said:

I have the same issue like above but unfortunately, the code doesn't work for me.

Natasa

Form Blocks were changed in late May 2023 and there's a new selector for error messages (.mkTKK6Se1WSWC0Psa20C). Note this is a code-generated class and could change at any time.

Hi @paul2009

Thank you very much, I managed to adjust the form. 
However, there is still a warning icon that I can't figure out how to colour in the red(#D0342C) instead of white. 
Please see attached screenshot.

Could you please help me out?

Thank you!
Natasa

2 hours ago, hello_studiofrey said:

there is still a warning icon that I can't figure out how to colour in the red instead of white. 

The warning icon is an SVG so the fill colour is defined in the HTML and cannot be changed with CSS. You may want to use some CSS to hide it instead.

@paul2009 and what would be the CSS to hide it? 

40 minutes ago, hello_studiofrey said:

what would be the CSS to hide [the exclamation icon]? 

You would use the class mentioned above, followed by svg. For example:

.mkTKK6Se1WSWC0Psa20C svg {
  display: none;
}

As I said earlier, I don't expect this will endure because the class may change at any time.

is there a way to target the font size of the error message? i can't seem to get it working

On 8/24/2023 at 7:12 PM, daniellenoakes said:

is there a way to target the font size of the error message? i can't seem to get it working

Use this CSS code

.field-list .mkTKK6Se1WSWC0Psa20C {
    font-size: 17px !important;
}