How to remove the black box when typing in form.

Site URL: https://www.finchandfinley.co.uk

Hi,

I looking for some help with my form blocks, I don’t like the black box that surrounds the area a user types their information in is it possible to remove this?

Thanks

Adam

Try adding this to Design > Custom CSS

div#block-aa7e5f4fd5e6584fc063 input {
    outline-color: transparent !important;
}

Thank you Taunphan - i've just done this and all works bar one "Project brief" seems odd any thoughts?

I would also like this to work on all my forms is there a site wide code i could use or just change the form name each time?

Thanks!

On 9/2/2022 at 12:59 AM, adamrl said:

Thank you Taunphan - i've just done this and all works bar one "Project brief" seems odd any thoughts?

I would also like this to work on all my forms is there a site wide code i could use or just change the form name each time?

Thanks!

Try this new code

.form-block input {
    outline-color: transparent !important;
}

19 hours ago, tuanphan said:

Try this new code

.form-block input {
    outline-color: transparent !important;
}

 

That has worked to all the forms but the same field still has the black border? Its a 'Text Area' field if that helps work out why this one field won't play ball?

Thanks for all your help so far!

7 hours ago, adamrl said:

That has worked to all the forms but the same field still has the black border? Its a 'Text Area' field if that helps work out why this one field won't play ball?

Thanks for all your help so far!

With text area, use this new code

.form-block input, .form-block textarea {
    outline-color: transparent !important;
}

On 9/4/2022 at 3:06 PM, tuanphan said:

With text area, use this new code

.form-block input, .form-block textarea {
    outline-color: transparent !important;
}

 

That's done it! Thanks so much.

This worked for me on my newsletter form

*:focus {

outline: none !important;

}