Remove focus outline on elements

Solved my problem with help from a post on a different platform. I understand removing focus features is not a best practice and I will work to find a workaround for restyling them. However, my issue was trying to override Bootstrap code. Here’s what 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;
}

• This reply was modified 4 years, 3 months ago by Yui.
• This reply was modified 4 years, 3 months ago by Yui. Reason: please use CODE button for proper formatting

Hi,

Thank you for the update. We are glad to know that you could find a workaround.

Kind regards,
David