删除输入的蓝色轮廓颜色答案

【问题标题】：Remove input blue outline color删除输入的蓝色轮廓颜色
【发布时间】：2020-01-07 02:43:21
【问题描述】：

我正在使用输入组件并尝试删除轮廓蓝色默认颜色，但我尝试的一切都失败了

我已经尝试更改 CSS 焦点轮廓和 box-shadow 属性

:focus {
  outline: 0px !important;
  -webkit-appearance: none;
  box-shadow: none !important
}

我希望当关注输入组件时蓝色轮廓会消失

【问题讨论】：

你试过outline:none:jsfiddle.net/axmfkqLg/1。如果这不起作用，那么您需要创建一个minimal reproducible example，因为您可能有其他样式冲突
我试过了，我会找有冲突的CSS

标签： css reactjs

【解决方案1】：

此边框用于显示元素已获得焦点。不过，您可以删除它：

input:focus{
    outline: none;
}

您可能希望添加一些其他方式让用户知道哪个元素具有键盘焦点，但为了可用性。

Chrome 也将适用于突出显示其他元素，例如用作模式的 DIV。为了防止突出显示这些元素和所有其他元素，您可以这样做：

*:focus {
    outline: none;
}

【讨论】：

【解决方案2】：

*:focus {
    outline: none;
}

<div>
  <input />
</div>
<div>
  <textarea></textarea>
</div>
<div>
  <button>Test</button>
</div>

【讨论】：

【解决方案3】：

根据MDN

outline CSS 属性是在单个声明中设置各种轮廓属性的简写：outline-style、outline-width 和 outline-color。

所以当我们将outline设置为none或0时，实际上是在设置3个属性

这是从 chrome 开发者选项中获得的：

outline:none; 将设置：

outline-color: initial;
outline-style: none;
outline-width: initial;

outline:0; 将设置：

outline-color: initial;
outline-style: initial;
outline-width: 0px;

在您的情况下，设置 outline:none 应该可以解决问题。

希望这会有所帮助。快乐编码！！！

【讨论】：

【解决方案4】：

你只需要添加这个（不需要:focus选择器）-：

input{
  outline: none;
}

【讨论】：

【解决方案5】：

这是你所期待的吗？您可以使用outline:none 将其删除您可以通过将颜色作为边框来为其添加其他颜色。

input:focus {
  outline: none;
  border: 1px solid red;
  box-shadow: 0 0 10px #719ECE;
}

&lt;input type="text"&gt;&lt;/input&gt;

【讨论】：

【解决方案6】：

在不检查问题可重现的代码的情况下提出解决方案并不容易。即使它看起来像一个大纲，它也可以实现为border、box-shadow 或其他东西。例如，在引导程序中，表单元素的:focus 上有一个浅蓝色粗边框，它们实际上是box-shadow。

因此，您检查您的元素及其伪类，如 :hover、:focus、:active 等，并找出产生蓝色边框效果的确切原因，然后用您自己的样式覆盖该特定样式。

【讨论】：