删除Safari/Chrome textinput/textarea发光

Question

我想知道当我使用CSS单击文本输入/文本区域时是否可以删除默认的蓝色和黄色发光？

Answer 1

textarea, select, input, button { outline: none; }

尽管如此,有人认为保持发光/轮廓实际上对于可访问性是有益的,因为它可以帮助用户查看当前关注的元素.

您还可以使用伪元素':focus'仅在用户选择输入时定位输入.

演示:https://jsfiddle.net/JohnnyWalkerDesign/xm3zu0cf/

Answer 2

这种效果也可以在非输入元素上发生.我发现以下工作是一种更通用的解决方案

:focus {
  outline-color: transparent;
  outline-style: none;
}

更新:您可能不必使用:focus选择器.如果你有一个元素,比如说<div id="mydiv">stuff</div>,你在这个div元素上获得了外部光晕,那就像正常一样应用:

#mydiv {
  outline-color: transparent;
  outline-style: none;
}

Answer 3

在基于webkit的浏览器中调整textarea大小:

在textarea上设置max-height和max-width不会删除可视调整大小手柄.尝试:

resize: none;

(是的,我同意"尽量避免做任何破坏用户期望的事情",但有时它确实有意义,即在Web应用程序的上下文中)

从头开始自定义webkit表单元素的外观:

-webkit-appearance: none;

Answer 4

我在一个div有点击事件的网站上遇到过这种情况，经过 20 次搜索后，我发现这个片段拯救了我的一天。

-webkit-tap-highlight-color: rgba(0,0,0,0);

这将禁用 webkit 移动浏览器中的默认按钮突出显示

Answer 5

卡尔·W：

这种效果也可能发生在非输入元素上。我发现以下作品可以作为更通用的解决方案

:focus {
  outline-color: transparent;
  outline-style: none;
}

我将解释这一点：

• :focus表示它可以为焦点元素设置样式。因此，我们正在设计重点元素。
• outline-color: transparent; 表示蓝色发光是透明的。
• outline-style: none; 做同样的事情。