0

I need to remove the focus outline that appears once an anchor link has been clicked. My link is a text link, so no button issue here. I know the benefits that outline provides to visually impaired users and UX, but my client is not interested in them. How do I remove them? For example, when the “SEE MORE” link is clicked a blue outline (similar to a “border”) quickly appears & disappears…

Here’s the url.

Here’s the code I tried to remove the outline:

a { outline: 0; }

Thank you in advance.

designer_newbie
  • 11
  • 2
  • Does this answer your question? [How to remove the blue background of button on mobile?](https://stackoverflow.com/questions/45049873/how-to-remove-the-blue-background-of-button-on-mobile) – Luka Dec 03 '20 at 13:48
  • Thanks for such a quick response. Unfortunately, I tried everything in this link https://stackoverflow.com/questions/3397113/how-to-remove-border-outline-around-text-input-boxes-chrome but nothing solved my problem so this leads me to believe I have overlooked a possible obvious step. outline: none; was reported to work in some cases, but not in mine. Struggling to figure out what's wrong. I need to remove the focus outline from this element globally "

    See More

    "     – designer_newbie Dec 03 '20 at 15:24
  • Can you make a codepen, so I can check it out, hopefully, I can help – Luka Dec 03 '20 at 18:59
  • Hi @Luka, I really appreciate your willingness to help. Doing this alone could have literally taken me several days or weeks. Just found the only solution that helped me here https://stackoverflow.com/questions/19053181/how-to-remove-focus-around-buttons-on-click/60219624#60219624 by using psuedo-class posted by JamesWilson. – designer_newbie Dec 03 '20 at 20:51

1 Answers1

0

Thanks Luka for helping out. JamesWilson (url) posted this code that finally worked for me:

/** 
 * The default focus style is likely provided by Bootstrap or the browser
 * but here we override everything else with a visually appealing cross-
 * browser solution that works well on all focusable page elements
 * including buttons, links, inputs, textareas, and selects.
 */
*:focus { 
  outline: 0 !important;
  box-shadow:
    0 0 0 .2rem #fff, /* use site bg color to create whitespace for faux focus ring */
    0 0 0 .35rem #069 !important; /* faux focus ring color */
}

/**
 * Undo the above focused button styles when the element received focus
 * via mouse click or touch, but not keyboard navigation.
 */
*:focus:not(:focus-visible) {
  outline: 0 !important;
  box-shadow: none !important;
}
designer_newbie
  • 11
  • 2