adamrl Posted August 19, 2022 Share Posted August 19, 2022 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 Link to comment
tuanphan Posted August 21, 2022 Share Posted August 21, 2022 Try adding this to Design > Custom CSS div#block-aa7e5f4fd5e6584fc063 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
adamrl Posted September 1, 2022 Author Share Posted September 1, 2022 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! Link to comment
tuanphan Posted September 3, 2022 Share Posted September 3, 2022 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
adamrl Posted September 4, 2022 Author Share Posted September 4, 2022 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 paul2009 Posted September 4, 2022 Solution Share Posted September 4, 2022 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. About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
tuanphan Posted September 4, 2022 Share Posted September 4, 2022 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
adamrl Posted September 6, 2022 Author Share Posted September 6, 2022 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. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment