CODEWITHSUNDEEP
htmlcsspseudo-class
Allan Juan
Allan Juan

Reputation: 2554

: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?

Upvotes: 0

Views: 146

Answers (1)

Paul S.
Paul S.

Reputation: 66324

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

Upvotes: 2

Related Questions