Remove focus outline on Squarespace [CSS snippet]
Removing the focus outline on Squarespace forms is a super simple task that just requires a couple of lines of custom code.
Let’s get straight into it…
Watch the video
Check out the YouTube video below 👇
Want a framework for designing the perfect homepage?
Once you’ve added the form to your Squarespace website head to Design > Custom CSS and in your custom CSS panel, add the following code.
*:focus {
outline: none !important;
}
You can also use the above code if you just want to edit the focus outline, swapping out “none” for “solid 5px” for example.
Once you’ve added in the code, hit save and you’ll have removed the focus outline.
It’s important to remember however that the focus outline feature is for accessibility, allowing users to see exactly which section of the form they are filling in. If you do decide to remove it therefore, it’s important to make up for it in other areas of your site accessibility.
Have a go and see if you prefer your Squarespace forms with or without the focus outline.
Need an expert to build your Squarespace website?
Book a free kick-off call with our team to discuss your project requirements in detail.
