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


当前回答

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

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

And

 *{
     outline: none;   
   }

其他回答

有时也会发生按钮,然后使用下面来删除外线

input:hover
input:active, 
input:focus, 
textarea:active,
textarea:hover,
textarea:focus, 
button:focus,
button:active,
button:hover
{
    outline:0px !important;
}

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

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

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

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

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

resize: none;

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

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

-webkit-appearance: none;

这种效果也会发生在非输入元素上。我发现下面是一个更通用的解决方案

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

更新:您可能不必使用:focus选择器。如果你有一个元素,说<div id="mydiv">stuff</div>,你得到了这个div元素的外部发光,就像正常应用:

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

如果你想移除Bootstrap中按钮的辉光(在我看来这并不一定是糟糕的用户体验),你需要以下代码:

.btn:focus, .btn:active:focus, .btn.active:focus{
  outline-color: transparent;
  outline-style: none;
}