有人知道如何改变Bootstrap的输入:焦点吗?当你点击输入字段时显示的蓝色辉光?


当前回答

这应该有助于去除它! 输入[type = text] { 边界:没有; } 输入[type = text]:focus { 边界:没有; 不必:没有; }

其他回答

我降落到这个线程寻找方法禁用辉光完全。许多答案对我来说太复杂了。为了简单的解决方案,我只需要一行CSS如下。

input, textarea, button {outline: none; }

你可以使用.form-control选择器来匹配所有输入。例如改为红色:

.form-control:focus {
  border-color: #FF0000;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);
}

把它放在你的自定义css文件中,并在bootstrap.css之后加载它。它将适用于所有输入,包括文本区域,选择等…

为什么不直接使用呢?

 input:focus{
        outline-color : #7a0ac5;
    }

如果你想完全移除阴影,添加类shadow-none到你的输入元素中。

为body标签添加一个Id。在你自己的Css(不是bootstrap.css)中指向新的body ID,并设置你想要覆盖的类或标记以及新的属性。 现在您可以随时更新引导,而不会丢失您的更改。

html文件:

  <body id="bootstrap-overrides">

css文件:

#bootstrap-overrides input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="url"]:focus, textarea:focus{
  border-color: red;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6);
  outline: 0 none;
}

请参见:覆盖引导css的最佳方法