覆盖twitter引导程序Textbox发光和阴影

Override twitter bootstrap Textbox Glow and Shadows

本文关键字：阴影 Textbox twitter 引导程序 覆盖      更新时间：2023-09-26

我想删除文本框和边框的蓝光，但我不知道如何覆盖它的任何js或css，请选中此处

编辑1

我之所以想这么做，是因为我使用的是jquery插件Tag it，我也使用twitter bootstrap，该插件使用隐藏的textField来添加标签，但当我使用twitter bootstrap时，它显示为文本框中的发光文本框，这有点奇怪

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

您也可以覆盖默认的引导设置以使用自己的颜色

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

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

设置为引导未聚焦样式

经过一些挖掘，我认为他们在最新的引导程序中更改了它。下面的代码对我来说很有效，它不是我使用的简单的框和表单控件，这是导致问题的原因。

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

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

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

转到自定义引导程序，查找@input border焦点，输入您想要的颜色代码，向下滚动并单击"编译并下载"。

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

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/

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

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

从这里得到

供应商前缀在这一点上是不必要的，除非您支持传统浏览器，并且您可以通过只引用所有输入而不是每个单独的类型来简化选择器。

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

HTML

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

CSS

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

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

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

/*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);
}
相关文章：