Blue input edge color stylization

Question

Hello, I’d like to know how I change the color of the blue border of the <input> that is activated when you click on it and the cursor appears to type.

Answer 1

Change the property outline-color of the element:

outline-color: red; /* borda vermelha */

An example:

input{
   outline-color: red;
}

<input>

But this way it will only work in Chrome. In other browsers you will need to use the :focus and also define the width and type of the border:

input:focus{
   outline: 2px solid red;
}

<input>

Then, to work in all browsers, use the option of :focus.