Every browser has it's own :focus/:hover behavior but I can't see it in inspect styles.

When I inspect an input (or any focusable element), and check the :focus checkbox I can see :focus styles defined in the context of the document, as well as user agent styles defined for the input element, but I can't see user agent :focus styles.

Is there any way to see them on Chrome or Firefox?

CodePudding user response：

Not sure if this would work but this was found on Mozilla documentation.

input:focus {
  background: red; 
}
input:focus-visible {
  background: red; 
}

CodePudding user response：

The user agent stylesheet is being defined for the :focus-visible state instead of :focus.

chrome-devtools-screenshot

You can check MDN for more info.