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


当前回答

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

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

其他回答

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

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

    }

在Firefox和Chrome中进行了测试。

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

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

编辑(11年后):不要这样做,除非您要提供一个回退来指示哪个元素是活动的。否则,这会损害可访问性,因为它实际上删除了显示文档中哪个元素具有焦点的指示。想象一下,你是一个键盘用户,却不知道你可以与什么元素交互。在这里,让易用性胜过美学。

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

尽管,有人认为保持发光/轮廓实际上有利于可访问性,因为它可以帮助用户看到当前关注的元素。

您还可以使用伪元素':focus'来只针对用户选择的输入。

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

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

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

resize: none;

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

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

-webkit-appearance: none;

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

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

And

 *{
     outline: none;   
   }