How to remove blurry red line around one of the field boxes?

Hi there,

I've just created this form but when I do something random in the email box, to see what comes up, it has a nice red line and everything but it also has this odd outer line in red (the faint blurry one) that I don't really want.. I've tried to remove it via css but everything I tried didn't seem to do anything.. perhaps I'm missing something?

The form link is: http://homeatlast.ekdesigns.co.uk/retreats.html (a bit further down the page)

or the form title is: Home at Last - Retreat Form

Also, I don't suppose the 'Please fill the required fields' could be changed to white instead of red?  It's just that the green background makes it a little hard to read.

Thanks!

Esther.

You must be referring to the required field error styles.

Please try adding this CSS codes on your form.

.form-line-error {

    box-shadow: none !important;

}

.form-button-error {

    color: #ffffff;

}

Let us know if this did not work.

Thanks.

Hi there,

I've tried adding those bits in, which I think may have partly been in there before, but I don't think it worked.. or at least, it's not saving so it's hard to tell!  The saving dotted circle keeps going round and round.. I refreshed the page but it's still the same.  Perhaps you could check my code to see if I've done it correctly?

Thanks!

I apologize. I also applied them on test form and they were not working.

I just realize your form was actually heavy formatted already with a lot of CSS codes. It seems the existing @media codes were overwrithing the regular CSS codes.

I'll check more how it can be fixed. I'll get back shortly.

Hi there, any ideas about how this could be fixed yet?

Thanks!

Hello @Esther17, to check if the actual CSS codes work, I stripped off your form's entire custom CSS codes and only entered the declaration to remove the box-shadow and it worked.

With that in mind, due to the number of custom codes injected on your form, there's definitely something that overwrites the codes suggested by my colleague (and that's what I'm trying to figure out right now).

Give me some time and I'll update you on this same thread if I stumble upon something.

Thanks in advance for your patience.

All right, I managed to find a way around it. I'm not sure what's causing the problem but I fixed it by declaring the CSS at the top before all the other CSS codes you injected.

For testing purposes, these are what I did to my cloned form:

1. I have set the fields as required so it's easier to emulate the box shadow and text color

2. I changed the background to closely match what you have on your website (so it's easier to see what's happening)

RESULT:

So, just use the same CSS codes that my colleague, Jonathan, provided, only this time, place it right at the top (no need to use the !important tag):

.form-line-error {

    box-shadow: none;

}

.form-button-error {

    color: #ffffff;

}

...the rest of your custom css codes goes here.

Give it a whirl and let us know how it goes.