How to get rid of the focused link outline?

Gloria Lai
Tera Contributor

‎03-04-2024 11:33 AM

Hello, I wonder if anyone knows how to hide the focused link outline in EC Theme.

This was working in ESC Theme. But client needs to move to EC Theme now, and asked if we can at least change the outline to a color of his choice.

 

GloriaLai_0-1709580588876.png

 

Codes I've tried but didn't work:

*:focus {
outline: auto 0px !important;
outline: -webkit-focus-ring-color auto 0px !important;
box-shadow: 0px !important;
--now-container--border-width: 0px !important;
--mv9-JvmzrAmtZ--kvZptZ-9Apz8: 0px !important;
--mv9-jvmzramtz--kvzptz-9apz8: 0px !important;
}

 

---------------------------------- or ---------------------

[role="button"]:focus, 

a:focus {
outline:auto 0px !important;
outline: -webkit-focus-ring-color auto 0px !important;
}

0 Helpfuls
  • 479 Views
1 REPLY 1

Sumanth16
Kilo Patron

‎03-04-2024 12:47 PM - edited ‎03-04-2024 12:48 PM

HI @Gloria Lai ,

Basically the box-shadow is coming from somewhere and if you can find the CSS where this has been set, you can directly prevent it there. I didn't snoop around too much, so my CSS is just a workaround and having that a:focus will affect other links as well.

Change to following code and try

a:focus
{
outline:none !important;
box-shadow: none !important;
}

 

If I could help you with your Query then, please hit the Thumb Icon and mark it as Correct !!

 

Thanks & Regards,

Sumanth Meda

 
 
0 Helpfuls