覆盖 twitter bootstrap Textbox Glow and Shadows

Posted 2023-02-22

【中文标题】覆盖 twitter bootstrap Textbox Glow and Shadows

【英文标题】：Override twitter bootstrap Textbox Glow and Shadows

【发布时间】：2012-08-25 09:33:02

【问题描述】：

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

编辑 1

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

【问题讨论】：

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

的新类

@jeschafe Here，还是什么都没有

请问您为什么要这样做？出于多种原因，关注点击是有好处的。

@GlynJackson 请检查编辑 1

看不到投反对票的原因。我遇到了同样的问题。但是在我的情况下，我需要将边框设为红色以指示验证错误。然而，由于发光，它根本看不见。

【参考方案1】：

到目前为止，在这个线程中没有一个答案帮助我。为我解决的问题是

/*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);

【参考方案2】：

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

【参考方案3】：

html

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

CSS

input:focus
    border: 1px solid #ccc

【参考方案4】：

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

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

【参考方案5】：

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

【参考方案6】：

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

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

【参考方案7】：

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

【参考方案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;

【参考方案9】：

在 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得到它

【讨论】：

从您提供的链接中查看 cmets，通常最好使用“none”而不是“caret”。

【参考方案10】：

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

【讨论】：

值得注意的是，<select> 选择器不包括在这里。

【参考方案11】：

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

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/

【参考方案12】：

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;

设置为引导不聚焦的样式