9

if I have a <div tabindex="1" id="mydiv">content</div> I can click on it, it will show an outline, and document.activeElement points to this element.

However, if I run document.getElementById('mydiv').focus() then the element appears in document.activeElement but does not show the outline.

How can I make it show the outline when focused programmatically? I'd prefer not to use a class I juggle around to style the outline into existence, as I'd like it to go away whenever the user takes any action that would blur it.

3
  • Can you add a functioning example? (or non-example) Jan 14, 2015 at 1:47
  • 2
    It appears to work here - jsfiddle.net/e6vtm75h Edit: Seems to work in Chrome; not Firefox. Jan 14, 2015 at 1:48
  • How is a div focusable? Guessing Support for ARIA? Jan 14, 2015 at 1:56

1 Answer 1

-1

I did it this way.

const element = document.querySelector(".the-element-you-wanna-focus-on")
element.focus()
.the-element-you-wanna-focus-on {
  &:focus,
  &:focus-visible {
    outline: auto 2px Highlight;
    outline: 5px auto -webkit-focus-ring-color;
  }
}

What is -webkit-focus-ring-color?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.