:focus rules are not applied

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?

>Solution :

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 />