覆盖Twitter Bootstrap文本框发光和阴影

89

我想删除文本框和边框的蓝光，但我不知道如何覆盖任何js或CSS，请在此处检查

编辑1

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

— 费迪·卡马尔（Fady Kamal）
source

您有能力添加新课程吗？如果是这样，只需添加一个新类border:none; box-shadow:none;

— jeschafe 2012年

1

@jeschafe 在这里，什么都没有-Fady

— Kamal

1

我能问一下为什么要这么做吗？出于多种原因，专注于点击是有益的。

— 格林·杰克逊

@GlynJackson请检查编辑1

— Fady Kamal

3

没有看到拒绝投票的原因。我遇到了同样的问题。但是，就我而言，我需要将边框设为红色以指示验证错误。但是由于发光，它几乎是不可见的。

— 奥伊贝克（Oybek）

144

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

— 耶舍夫
source

27

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

— 霍基
source

3

值得注意的是，<select>此处未包含选择器。

— 布莱斯·约克

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

设置为引导不专心的样式

— 奥斯汀·格列柯
source

7

经过一些挖掘后，我认为他们在最新的引导程序中对其进行了更改。下面的代码为我工作，它不是简单的盒子，我正在使用的表单控件导致了问题。

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

— 犯罪
source

7

转到“ 自定义引导程序”，查找@ input-border-focus，输入所需的颜色代码，向下滚动并单击“编译并下载”。

7

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

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

— 迪姆巴·卡卢（Dimgba Kalu）
source

5

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

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/

— 格林·杰克逊（Glyn Jackson）
source

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! */
}

从这里得到

— 克里斯
source

1

查看您提供的链接中的评论，通常最好使用“无”而不是“插入符”。

— 莱恩·沃尔顿

2

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

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

— 梅兰妮·塞弗特（Melanie Seifert）
source

0

的HTML

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

的CSS

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

— 萨凡（Savan Padaliya）
source