Javascript 覆盖 twitter bootstrap 文本框发光和阴影
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12200544/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Override twitter bootstrap Textbox Glow and Shadows
提问by Fady Kamal
I want to remove the Blue glow of the textbox and the border, but i don't know how to override any of the js or the css of it, check Here
我想删除文本框和边框的蓝色发光，但我不知道如何覆盖它的任何 js 或 css，请检查这里
EDIT 1
编辑 1
I want to do this because i am using the jquery plugin Tag-itand i am using twitter bootstrap also, the plugin uses a hidden textField to add the tags, but when i am using twitter bootstrap it appears as a textbox with glow inside a textbox which is a little bit odd
我想这样做是因为我正在使用 jquery 插件Tag-it并且我也在使用 twitter bootstrap，该插件使用隐藏的 textField 添加标签，但是当我使用 twitter bootstrap 时，它显示为一个文本框，里面有发光有点奇怪的文本框
回答by jeschafe
.simplebox {
outline: none;
border: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
回答by Hawkee
You can also override the default Bootstrap setting to use your own colors
您还可以覆盖默认的 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 ;
/* 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);
}
回答by Austin Greco
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;
}
sets to bootstrap unfocused style
设置为引导不集中的风格
回答by Dimgba Kalu
if you think you can't handle the css class then simply add style to the textfield
如果您认为您无法处理 css 类，那么只需将样式添加到文本字段
<input type="text" style="outline:none; box-shadow:none;">
回答by cromination
After doing some digging, I think they changed it in the latest bootstrap. The below code worked for me, its not simple box its form-control that I was using that was causing the issue.
在做了一些挖掘之后，我认为他们在最新的引导程序中改变了它。下面的代码对我有用，它不是简单的盒子，我使用的表单控件导致了问题。
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;
}
回答by cromination
Go to Customize Bootstrap, look for @input-border-focus, enter your desired color code, scroll down and click "Compile and Download".
转到Customize Bootstrap，查找 @input-border-focus，输入所需的颜色代码，向下滚动并单击“编译和下载”。
回答by Glyn Hymanson
this will remove the border and the focus blue shadow.
这将删除边框和焦点蓝色阴影。
input.simplebox,input.simplebox:focus {
border:none;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-moz-transition: none;
-webkit-transition: none;
}
回答by chris
On bootstrap 3 there is a small top shodow on ios, could be removed with this:
在 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! */
}
Got it from here
从这里得到
回答by Melanie Seifert
Vendor prefixes aren't necessary at this point, unless you're supporting legacy browsers, and you could simplify your selectors by just referring to all inputs rather than each of the individual types.
供应商前缀此时不是必需的，除非您支持旧浏览器，并且您可以通过仅引用所有输入而不是每个单独类型来简化选择器。
input:focus,
textarea:focus,
select:focus {
outline: 0;
box-shadow: none;
}
回答by Savan Padaliya
HTML
HTML
<input type="text" class="form-control shadow-none">
CSS
CSS
input:focus{
border: 1px solid #ccc
}
