How to set input focus border color with css?-CodePudding

With this CSS setting

<!DOCTYPE html>
<html>
  <head>
    <style>
      input:focus {
        border-color: red;
      }
    </style>
  </head>
  <body>
    <h1>Demo of the :focus selector</h1>

    <form>
      First name: <input type="text" name="firstname" /><br />
      Last name: <input type="text" name="lastname" />
    </form>
  </body>
</html>

I want to set a new color to the input text when focus on it. But in Chrome browser the border got blue and in Firefox browser it got red with blue.

https://codesandbox.io/s/twilight-mountain-wq3ox5?file=/index.html

Doesn't focus work with border-color?

CodePudding user response：

You're looking to modify the outline property:

input:focus {
  border-color: red;
  outline: red;
}

<h1>Demo of the :focus selector</h1>

<form>
  First name: <input type="text" name="firstname" /><br />
  Last name: <input type="text" name="lastname" />
</form>

There's a good article on the difference between the two here.