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

user_16013232 0
Viewed 1529

  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

outline firefox google-chrome focus css
2 Answers

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;
user_108674540

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.

user_133641050
Related