👓 :focus-visible

Link https://blog.mayank.co/focus-visible
Note date 01 Feb, 2023
Tags css
👋 FYI, this note is over 6 months old. Some of the content may be out of date.

:focus-visible allows you to get rid of the annoying focus outline on mouse clicks, while letting you specify the focus styling only for keyboard users (as well as other “tabbing” devices like joysticks)

button:focus-visible {
  outline: 2px solid rebeccapurple;
}
@supports not selector(:focus-visible) {
  button:focus {
    outline: 2px solid rebeccapurple;
  }
}

      
    
    
button {
  &:focus-visible {
    outline: 2px solid rebeccapurple;
  }
  @supports not selector(:focus-visible) {
    &:focus {
      outline: 2px solid rebeccapurple;
    }
  }
}

      
    
    
{
  '&:focus-visible' {
    outline: '2px solid rebeccapurple';
  },
  '@supports not selector(:focus-visible)' {
    '&:focus' {
      outline: '2px solid rebeccapurple';
    }
  }
}
← Back home