我想知道是否有可能删除默认的蓝色和黄色辉光,当我点击一个文本输入/文本区域使用CSS?


当前回答

当然!你也可以使用*从所有HTML元素中删除蓝色边框

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

And

 *{
     outline: none;   
   }

其他回答

我在一个有点击事件的div上经历了这一点,在20次搜索之后,我发现这个片段挽救了我的一天。

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

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

我只需要从我的文本输入字段中删除这种效果,我不能让其他技术工作得很好,但这对我来说是有效的;

input[type="text"], input[type="text"]:focus{
            outline: 0;
            border:none;
            box-shadow:none;

    }

在Firefox和Chrome中进行了测试。

这是为那些关心可访问性的人提供的解决方案。

请不要使用outline:none;用于禁用焦点轮廓。如果你这样做,你是在扼杀网络的可访问性。有一种可行的方法。

看看我写的这篇文章,它解释了如何以一种可访问的方式删除边界。

简而言之,当我们检测到键盘用户时,只显示轮廓边框。一旦用户开始使用他的鼠标,我们禁用大纲。结果你得到了两者中最好的。

Carl W:

这种效果也会发生在非输入元素上。我发现下面是一个更通用的解决方案 :专注{ 边框色:透明; outline-style:没有; }

我来解释一下:

:focus意味着它对焦点中的元素进行样式化。因此,我们对焦点中的元素进行样式化。 边框色:透明;意味着蓝光是透明的。 outline-style:没有;做同样的事情。

在基于webkit的浏览器中调整文本区域大小:

在文本区域设置max-height和max-width不会移除可视的调整大小手柄。试一试:

resize: none;

(是的,我同意“尽量避免做任何打破用户期望的事情”,但有时它确实是有意义的,例如在web应用程序的上下文中)

要从头定制webkit表单元素的外观和感觉:

-webkit-appearance: none;