CSS 轮廓颜色属性在 firefox 中不起作用吗？例如：输入：焦点{轮廓颜色：#9aadee； }答案

【问题标题】：Is CSS outline-color property is not working in firefox ? e.g. : input:focus {outline-color:#9aadee; }CSS 轮廓颜色属性在 firefox 中不起作用吗？例如：输入：焦点{轮廓颜色：#9aadee； }
【发布时间】：2021-05-24 05:41:57
【问题描述】：

.login-box input:focus{ outline:1px solid #9aadee; } - 这将在 Firefox 中有效，但在 Chrome 中无效
.login-box input:focus{ outline-color:#9aadee; } - 这在 Firefox 中不起作用，但在 Chrome 中起作用

【问题讨论】：

标签： css google-chrome firefox focus outline

【解决方案1】：

尽管MDN 引用输入作为不必定义轮廓样式以使其他样式生效的情况，但对于某些浏览器来说似乎并非如此。

因此，如果您还明确设置，您的第二个示例应该可以工作

outline-style: solid;

【讨论】：

这是我在 Firefox v92 中的修复。仅使用轮廓颜色是不够的。

【解决方案2】：

即使我面临同样的问题，然后我添加了两行代码，仅添加 outline-color 对我不起作用

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

但添加此代码后，它概述了我们不需要的所有输入字段[取决于用户]

如果有人希望在单击输入字段时更改轮廓颜色，请使用以下代码。

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

其中 input 可以是输入标签或 classname / id 赋予相应的输入字段。

【讨论】：