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 👇

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.

📩 Join the inner circle to get exclusive code updates

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.

Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

Want more?