The switch displays the focus color after clicking.

[bre97-web]

In desktop browsers, why does switch appear focused after being clicked? When I was browsing the switch accessibility document, I noticed that the switch in the document was in focus after being clicked. There is no focus state, and in the actual code, the background color of the handle will maintain the color of the focus state after the switch is clicked.

This is a screenshot after clicking and removing focus:

Here is a screenshot of what does nothing when clicked:

[asyncLiz]

On the web, :focus is generally applied when a user clicks or taps on an element. :focus persists until another element is clicked on to move the focus.

There is one notable exception. Safari intentionally does not apply :focus styles after a pointer click as a design opinion. This differs from Chrome, Edge, and Firefox.

If you're theming and noticing the colors changing on hover/focus/press when you set the color, check out "How do I change the color of a button?" and "Why does my color change on hover/focus/pressed?"