:focus rules are not applied-CodePudding

I'm trying to apply different styles to an element when it's focused, using the :focus pseudoclass. At a very basic level, I have something like this:

input {
  border: 1px solid red;
}

input:focus {
  border: 1px solid blue;
}

<input type="text">

I expected the border of the input field to become blue when it's focused (clicked), but it becomes black instead. Why is that?

CodePudding user response：

This is being applied by your brower. Google Chrome's default user agent stylesheet (and probably other browsers) has the following rule

:focus-visible {
  outline: -webkit-focus-ring-color auto 1px;
}

Therefore, you'll need to override this rule too, e.g.

input:focus-visible {
  outline: unset;
}

input:focus {
  border-color: red;
}

input:focus-visible {
  outline: unset;
}

<input />