Is CSS outline-color property is not working in firefox ? e.g. : input:focus {outline-color:#9aadee; }

Question

1. .login-box input:focus{ outline:1px solid #9aadee; } -this gonna work in Firefox but not in Chrome

2. .login-box input:focus{ outline-color:#9aadee; } -this not-gonna work in Firefox but works in Chrome

Hanoverian

Answer 1

Although MDN cites input as a case where the style of the outline does not have to be defined for the other styling to take effect this appears not to be the case for some browsers.

Your second example should therefore work if you also explicitly set

outline-style: solid;

Secretariat

This was the fix for me in Firefox v92. Using only outline-color was not enough. – Fail

Answer 2

Even I was facing same Issue, then I added two lines of code, adding only outline-color didn't work for me

outline-style: solid;
outline-color: skyblue;

But after adding this code, it outlines all the input fields which we don't need[depends on user]

If someone wants the outline color to change on click on the input field then use following code.

input:focus{
    outline-style:solid;
    outline-color: skyblue;
}

where input can be input tag or classname / id given to respective input field.

Neat