90

我想删除文本框和边框的蓝色辉光，但我不知道如何覆盖任何 js 或它的 css，请查看这里

编辑 1

我想这样做是因为我正在使用 jquery 插件Tag-it并且我也在使用 twitter bootstrap，该插件使用隐藏的 textField 来添加标签，但是当我使用 twitter bootstrap 时，它显示为一个带有发光内部的文本框有点奇怪的文本框

4

12 回答 12

144 
.simplebox {
  outline: none;
  border: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}
于 2012-08-30T15:44:20.113 回答
29

您还可以覆盖默认的 Bootstrap 设置以使用您自己的颜色

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
  border-color: rgba(82, 168, 236, 0.8);
  outline: 0;
  outline: thin dotted \9;
  /* IE6-9 */

  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
  -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
}
于 2013-01-16T20:32:37.047 回答
11 
input.simplebox:focus {
  border: solid 1px #ccc;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  transition: none;
  -moz-transition: none;
  -webkit-transition: none;
}

设置引导不专注的风格

于 2012-08-30T15:49:38.917 回答
8

如果您认为您无法处理 css 类，那么只需将样式添加到文本字段

<input type="text" style="outline:none; box-shadow:none;">
于 2012-10-27T01:12:40.510 回答
8

在做了一些挖掘之后，我认为他们在最新的引导程序中改变了它。下面的代码对我有用，它不是简单的框，我使用的表单控件导致了问题。 

input.form-control,input.form-control:focus {
    border:none;
    box-shadow: none;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   -moz-transition: none;
   -webkit-transition: none;
}
于 2014-05-06T14:34:29.660 回答
7

转到Customize Bootstrap，查找 @input-border-focus，输入您想要的颜色代码，向下滚动并单击“编译和下载”。

于 2014-09-01T01:18:20.330 回答
6

这将删除边框和焦点蓝色阴影。

input.simplebox,input.simplebox:focus {
  border:none;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -moz-transition: none;
  -webkit-transition: none;
}

http://jsfiddle.net/pE5mQ/64/

于 2012-08-30T15:40:50.607 回答
4

在 bootstrap 3 上，ios 上有一个小的顶部显示，可以用这个删除：

input[type="text"], input[type="email"], input[type="search"], input[type="password"] {
    -webkit-appearance: caret;
    -moz-appearance: caret; /* mobile firefox too! */
}

从这里得到

于 2013-12-04T09:55:23.387 回答
2

此时不需要供应商前缀，除非您支持旧版浏览器，并且您可以通过仅引用所有输入而不是每个单独的类型来简化选择器。

input:focus,
textarea:focus,
select:focus {
  outline: 0;
  box-shadow: none;
}
于 2017-11-03T16:13:29.510 回答
0 
.form-control:focus {
  box-shadow: 0 0 0 0.2rem rgba(103, 250, 34, 0.25);
}
于 2020-11-01T06:56:27.783 回答
0

到目前为止，没有一个答案可以帮助我解决这个问题。为我解决的问题是

/*Shadow after focus - Overwrites bootstrap5 style for btn classes*/
.btn-check:focus + .btn-primary, 
.btn-primary:focus {
    box-shadow: 0 0 7px 7px rgba(4,220,93,255);
}
/*Shadow while clicking (Animation) - Overwrites bootstrap5 style for btn classes*/
.btn-check:active + .btn-primary:focus, 
.btn-check:checked + .btn-primary:focus, 
.btn-primary.active:focus, 
.btn-primary:active:focus, 
.show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .25rem rgba(10, 102, 37, 0.493);
}
于 2022-01-12T14:02:56.560 回答
0

HTML

<input type="text" class="form-control shadow-none">

CSS

input:focus{
    border: 1px solid #ccc
}
于 2019-12-31T13:01:03.203 回答