CODEWITHSUNDEEP
htmlcss
Alpin Cleopatra
Alpin Cleopatra

Reputation: 389

How to set input focus border color with css?

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?

Upvotes: 1

Views: 6560

Answers (1)

Obsidian Age
Obsidian Age

Reputation: 42304

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.

Upvotes: 4

Related Questions