删除输入的蓝色轮廓色

Question

我正在使用输入组件并尝试删除轮廓蓝色默认颜色，但是我尝试的所有操作均失败

我已经尝试过更改CSS焦点轮廓和框阴影属性

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

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

input outline

Answer 1

*:focus {
    outline: none;
}

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

Answer 2

您只需要添加此内容（不需要:focus选择器）-：

input{
  outline: none;
}

Answer 3

此边框用于显示该元素已聚焦。不过，您可以将其删除：

input:focus{
    outline: none;
}

您可能想添加一些其他方式，以使用户知道哪个元素具有键盘焦点（出于可用性）。

Chrome还将适用于突出显示其他元素，例如用作模态的DIV。为了避免同时突出显示这些元素和所有其他元素，您可以执行以下操作：

*:focus {
    outline: none;
}

Answer 4

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

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

<input type="text"></input>

Answer 5

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

因此，您检查了元素及其伪类，例如:hover，:focus，:active等，并确切找出是什么导致了蓝色边框效果，然后用您自己的颜色覆盖该特定样式样式。

Answer 6

根据MDN

  

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

因此，当我们将轮廓设置为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 应该可以解决问题。

希望这会有所帮助。祝您编码愉快！