删除Safari/Chrome textinput/textarea发光

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

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

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

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

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

更新:您可能不必使用:focus选择器.如果你有一个元素,比如说

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

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

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

resize: none;

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

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

-webkit-appearance: none;

卡尔·W：

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

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

我将解释这一点：

:focus表示它可以为焦点元素设置样式。因此，我们正在设计重点元素。

outline-color: transparent; 表示蓝色发光是透明的。

outline-style: none; 做同样的事情。