为什么我不能删除Twitter Bootstrap中的蓝色textarea边框？

Question

在Chrome中,textarea周围有一个蓝色边框.

为什么我不能删除它？

textarea:hover, input:hover, textarea:active, input:active, textarea:focus, input:focus {
        outline:0px !important;
    }

Answer 1

你这样写-webkit-appearance:none;:

textarea:hover, 
input:hover, 
textarea:active, 
input:active, 
textarea:focus, 
input:focus,
button:focus,
button:active,
button:hover,
label:focus,
.btn:active,
.btn.active
{
    outline:0px !important;
    -webkit-appearance:none;
    box-shadow: none !important;
}

Answer 2

Bootstrap 3

如果您只想更改颜色,请更改变量(推荐):

更少或定制

@input-border-focus: red;

variables.less

萨斯

$input-border-focus: red;

variables.sass

如果你不想完全删除它,你将不得不覆盖设置轮廓的Mixin.

.form-control-focus(@color: @input-border-focus) {}

CSS

如果您使用css通过以下方式覆盖它:

.form-control:focus{
    border-color: #cccccc;
    -webkit-box-shadow: none;
    box-shadow: none;
}

链接到实施

Answer 3

我相信这是一个影子.试试这个:

.box-shadow(none);

或者如果你没有使用LESS:

box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;

Answer 4

尝试这个,我认为这将有所帮助,你的蓝色边框将被删除:

outline:none;

Answer 5

这对我有用

.form-control {
box-shadow: none!important;}

Answer 6

这100%工作.

textarea:focus, input[type="text"]:focus,textarea[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, .form-control:focus {  
border-color: (your color) or none;
box-shadow:(your color) or none;
outline: (your color) or none;}

Answer 7

引导程序 4.0

*:focus
{
    box-shadow: none !important;
    border: solid 1px red( any color ) !important;
}

视觉示例