覆盖twitter bootstrap文本框发光和阴影
我想删除文本框和边框的蓝色发光,但我不知道如何覆盖任何js或它的css,请点击这里
编辑1
我想要做到这一点,因为我使用jquery插件标签 ,我也使用twitter引导也插件使用隐藏的textField添加标签,但是当我使用twitter bootstrap它显示为一个文本框发光内有点奇怪的文本框
.simplebox { outline: none; border: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; }
您也可以覆盖默认的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); }
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; }
设置为引导未聚焦的风格
在做了一些挖掘之后,我认为他们在最新的引导中改变了它。 下面的代码为我工作,它不是简单的框它的forms控制,我使用的是造成这个问题。
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; }
这将删除边框和焦点蓝色阴影。
input.simplebox,input.simplebox:focus { border:none; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; -moz-transition: none; -webkit-transition: none; }
转到自定义引导 ,寻找@input边界焦点,input您想要的颜色代码,向下滚动,然后单击“编译和下载”。
如果你认为你不能处理CSS类,那么只需添加样式到文本字段
<input type="text" style="outline:none; box-shadow:none;">
在bootstrap 3上,有一个小的顶部在iOS上,可以删除这个:
input[type="text"], input[type="email"], input[type="search"], input[type="password"] { -webkit-appearance: caret; -moz-appearance: caret; /* mobile firefox too! */ }
从这里得到它
除非您支持传统浏览器,否则供应商前缀不是必需的,您可以通过引用所有input而不是每种types来简化select器。
input:focus, textarea:focus, select:focus { outline: 0; box-shadow: none; }