Streaming live at 10am (PST)

Black border shown when pressed Button

Hey Webflowers, when I press the button on my submission form there is a black border shown. Does anyone know how to remove it?

https://preview.webflow.com/preview/button-5f8f5e?utm_medium=preview_link&utm_source=designer&utm_content=button-5f8f5e&preview=7445a83bd9dd6679b9d871f73b90c354&mode=preview


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Having the same problem here, would be great if someone could help. It seems to be a bug instead of a design fail.

@Felix_O & @Lucas14

This actually isn’t a bug, it’s a change in the :focus state that changed in a recent update to Chrome to improve accessibility. I’d recommend you keep something there to help with folks who require visual assistance while browsing/tabbing through links on a website, but you can style this within Webflow.

In order to get the default setting off (which actually uses the outline property that affects the area around any element border) you can apply the following code:

*:focus { outline: none; }

Keep in mind that will eliminate the style from all elements that are focused (which is not really desirable unless you go through and add your own style that has the same effect but fits better within your design) and it only applies to Chrome—other browsers may use their own styling that would need to be cleared as well.

2 Likes

Thanks Mikeyevin, can you please advise where and how to enter the code

*:focus { outline: none; }

Assuming you want the code to affect all pages on the site, you’ll want to include it in the Project Settings > Custom Code > Head Code within <style> tags:

<style>
*:focus { outline: none; }
</style>
1 Like

Thanks for the quick reply Mike, that works beautifully :blush:.

Regards,

Andrew Fraser

Sales & Marketing Director

AFraser@luxuryperu.travel

Toll Free USA / Canada - +1 800 298 3158 x104

Schedule a Call With Me

www.luxuryperu.travel

image001.jpg