Docs

[MartinM29]

URL: http://www.derbyshirehills.com

The buttons on this page look as I would expect them to except that after they have been clicked, if I return to the page, they have a heavy red shadow surrounding them:

I’m sure this is something obvious and I’m just too close to see it for myself. But can you tell me how to remove the shadow?

Many thanks

[Rahul]

Hey There,

Thanks for writing in!

We’ve checked with the given URL and tried opening the links linked with the buttons and we couldn’t see such red boarders! Can you please double check it or give us some more information about the issue? It would be helpful for our team to take a closer look of it.

Note that, such stylings are for the purpose of accessibility. Find out more on it from the below link :

https://css-tricks.com/removing-the-dotted-outline/

Thanks for understanding!

[MartinM29]

The borders show when you return to that page after having clicked and followed the link.

I have cleared caches and transients, but the problem is still there.

[MartinM29]

This reply has been marked as private.

[Joao]

Hi Martin,

I am not sure what you are referring to, for me it is really unnoticeable, but try this :

.x-btn:focus {
    outline: none
  
}

Hope that helps,

Joao

[MartinM29]

Hi Joao,

Thank you for looking for me.

No that makes no difference.

I have now set so that the link opens a new tab.. Meaning if you then go back to the original tab without clicking on the page, you will see the heavy red outline. Click on the page and it disappears. Looks like it is an ‘on click’ effect, but I can find nothing in the code which is controlling it.. See new image..

One of my colleagues is also apparently having this issue on other sites.

Any help would be very welcome.

[Jade]

Hi there,

Please try this:

.x-btn:focus, .button:focus, [type="submit"]:focus {
    outline: none !important;
}

Hope this helps.

[MartinM29]

Thank you Jade. works perfectly!

[Friech]

We’re delighted to assist you with this.

Cheers!

[Author]

Posts