删除输入的蓝色轮廓颜色

Posted 2023-02-22

【中文标题】删除输入的蓝色轮廓颜色

【英文标题】：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

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

input outline

【问题讨论】：

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

我试过了，我会找有冲突的CSS

【参考方案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;

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

【参考方案6】：

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

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