Browser Inconsistencies in `:focus` Styles

Very rough notes outline on what's happening in the :focus (without tapping into :focus-within) styles in different browsers.



  • Chrome highlights everything
  • Firefox skips link
  • Safari skips button and link, but will pick them up when tabbing via alt + tab

Summary by tags

  • everyone picks up: input, text area, checkbox, select, div, and span
  • complexity: radio, button, link

Thoughts / suggestions

  • should still choose semantic tags → users may be used to the behaviors in the browser they use
    • do not use extra JS to force focus an element
    • do not choose
  • may use CSS pseudo selector on parent div, i.e., hover div, then something happens to some svg inside of it

Etsy's focus UI using parent div, a heart icon floats up when focused

Reference materials