How to remove blue border focused state

Hi all,

I know it might be a simple task, but I am struggling to remove a blue border around the element when it’s clicked.
I researched online at it seems to be in relation to a focused state, but I couldn’t find a workaround to get rid of it.
I am attachnig a screenshot with the issue.


Here is my site Read-Only: Webflow - Studio 365 Design
Live work in progress site is viewable here: https://studio-365-design.webflow.io/

Many thanks everyone!

one example found on this forum other solutions are here on forum or on internet.

nope, doesn’t work :frowning:

Making focused border to 0 or transparent is simple CSS @Eugene_Soch . If response in linked request didnt help you to understand how it works there is a many articles on internet, find some and try it again! It works. :man_shrugging:

@Stan the problem was elsewhere.
I found the solution - this code helped.
I know it’s not the most elegant way, but upon inspection it seems that Webflow adds some extra css to override default settings - see screenshot below.

And here is the code that helped:

/* Focus state style for keyboard navigation for the focusable elements */ *[tabindex]:focus-visible, input[type="file"]:focus-visible { outline: 0rem solid #4d65ff!important; outline-offset: 0rem!important; }

1 Like

@Stan the problem was to find the correct element to target, or in this specific instance, amend css rule, which needed some digging to do. I put this post solely for the purpose of finding the answer quicker, than I can do it myself :)
Thank you for your contribution though ;)