Jump to content

How to remove the black box when typing in form.

Go to solution Solved by paul2009,

Recommended Posts

  • Replies 7
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • 2 weeks later...
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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!

Link to comment
  • Solution
On 8/19/2022 at 9:08 AM, adamrl said:

I don’t like the black box that surrounds the area a user types their information in is it possible to remove this?

I do not recommend that you, or anyone else, remove this important feature because it is extremely important for the inclusion and accessibility for all your site visitors. In case you weren’t aware, the “box” highlighting the active form field is called the "focus outline". The contrasting black outline will appear when a visitor moves around the form (or other parts of the site) using the keyboard. It is designed to highlight the area of the page that currently has focus and is an essential navigation tool for visitors with vision and movement disabilities as well as neurodiverse visitors who have difficulty focusing. Please consider these users and do not try to disable it. In some countries there are legal stipulations for accessibility so removing accessibility features like this may cause legal issues for the website owner.

I hope this provides some insight into this feature and why it is important. 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.