Member Avatar for jacob21

Hi,

when i click on a link,its showing an extra shadow after clicking on linking text.
Need suggestions.

  • 4 Contributors
  • 5 Replies
  • 67 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

This is the browser focus ring showing up on the login button after the lightbox closes. saw the rectangle; and were correct that the UA focus style is the cause and that it can be overridden — but removing focus styling outright breaks keyboard accessibility. Two safer actions: give a clear, custom focus only to keyboard users, and manage focus when opening/closing the modal.

Use the modern pseudo-class to target keyboard-focus only and show an explicit visible indicator (replace the UA look rather than just hiding it):

/* show a clear, custom focus for keyboard users */
.login-btn:focus-visible {
  box-shadow: 0 0 0 4px rgba(0,123,255,0.20);
  border-radius: 4px;
}

For older browsers, include the focus-visible polyfill so the same behavior applies. Also, when closing the lightbox return focus to the element that opened it rather than leaving focus elsewhere — that prevents a surprising outline on the page:

let opener;
document.querySelector('#loginBtn').addEventListener('click', e => {
  opener = e.currentTarget;
  openLightbox();
});

function closeLightbox() {
  closeLightboxDom();
  if (opener && typeof opener.focus === 'function') opener.focus();
}

Quick debugging: reproduce with keyboard (Tab), inspect the focused element in DevTools to see UA rules, and test after restoring focus. Resources: MDN on :focus-visible ([MDN]) and the WICG focus-visible polyfill ([WICG]) — and follow the W3C ARIA dialog guidance for proper focus management ([W3C ARIA]).

Recommended Answers

All 5 Replies

Member Avatar for zobadof

What website is this on? Code??

Member Avatar for JorgeM

Can you provide the URL to this site or sample code?

Member Avatar for jacob21

futor.com and click on login button and then close the light box.login button has some rectangular shadow

Member Avatar for EvolutionFallen

Do you mean the yellow border? And are you getting this in Chrome only?
If so, looks like this is a default style for focused items in Chrome. To override, simply add to your stylesheet:

:focus { outline: 0; }
Member Avatar for JorgeM

I also took a look and it does look like if you include the style that EvolutionFallen has recommended should work. If you only want to apply it to input elements, then you would do so as:

input:focus

or for a specific selector:

#selectorID:focus

Edited by JorgeM
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.