How to set input focus border color with css?

Question

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?

Obsidian Age · Accepted Answer · 2022-06-30 02:09:07Z

4

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.

answered Jun 30, 2022 at 2:09

Obsidian Age

42.6k11 gold badges54 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to set input focus border color with css?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related