HTML, CSS, CSS Variables and Flexbox and Javascript

Community feedback

• 

  T

  Alex•2,010

  @AlexKMarshallPosted almost 3 years ago

  If you use :focus-visible and add an outline there, then it will only show when a user interacts with your button with the keyboard, and not with a mouse.

  If you use outline rather than border than you won't get layout shifts either, as outline isn't calculated in the element size so the size won't change when it's added and removed

  Marked as helpful

  2
• 

  Agata Liberska•3,995

  @AgataLiberskaPosted almost 3 years ago

  Hi David, I'm not sure there is another way - the border is there because the input is still in focus. I guess in theory, you could remove it with JS? But that would be messing with behaviour that users expect when browsing so it's not a good idea. What you could do is make the focus styles go with the design more. You can use box shadows for example to have a white ring around the toggle (check out how bootstrap does their focus styles, I think it's quite nice - note that you don't need to include bootstrap here, just check out their styling).

  Hope this helps :)

  Marked as helpful

  0

  ---

  

  P

  David Turner•4,150

  @brodiewebdtPosted almost 3 years ago

  @AgataLiberska Thanks for the reply. I don't have a problem with it, just thought I would ask.

  0