Question

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

编辑1

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

Answer 1

.simplebox {
  outline: none;
  border: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

Answer 2

您也可以覆盖默认的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);
}

Answer 3

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;
}

设置为引导未聚焦的样式

Answer 4

如果您认为无法处理css类，则只需在文本字段中添加样式

<input type="text" style="outline:none; box-shadow:none;">

Answer 5

在做了一些挖掘后，我认为他们在最新的bootstrap中改变了它。下面的代码对我有用，它不是简单的盒子，它我使用的形式控制导致了这个问题。

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;
}

Answer 6

转到Customize Bootstrap，查找@ input-border-focus，输入所需的颜色代码，向下滚动并点击＆＃34;编译和下载＆＃34;。

Answer 7

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

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/

Answer 8

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

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

来自here

Answer 9

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

input:focus,
textarea:focus,
select:focus {
  outline: 0;
  box-shadow: none;
}

Answer 10

HTML

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

CSS

input:focus{
    border: 1px solid #ccc
}

Answer 11

.form-control:focus {
  box-shadow: 0 0 0 0.2rem rgba(103, 250, 34, 0.25);
}

覆盖twitter bootstrap Textbox Glow和Shadows

11 个答案: