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

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

Answer 2

我相信这是一个影子。 尝试这个：

 .box-shadow(none); 

或者如果你不使用LESS：

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

Answer 3

Bootstrap 3

如果你只是想改变颜色，改变variables（ 推荐 ）：

less或定制者

 @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 4

尝试这个，我认为这将有助于你的蓝色边框将被删除：

 outline:none; 

Answer 5

这工作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 6

这对我有效

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

Answer 7

使用outline: transparent; 为了使轮廓看起来像不在那里，但仍然提供可访问性的forms。 outline: none; 会对可达性产生负面影响。

来源： http : //outlinenone.com/

Answer 8

试试这个改变边界颜色到任何你想要的

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

Answer 9

为了将来的参考，你可以通过检查员计算出计算的样式

Answer 10

如果你是一个人，谁仍然面临这个问题。

这是答案，谢天谢地。

 .radio-custom input[type=radio]:focus+label::before { background-image: none !important; outline: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; } 

你想知道为什么别人的解决scheme不适合你 。

因为风格实际上并不适用于单选button。

添加这种风格，你会发现你的答案

 input[type="text"] { margin-left: 10px; } 

标签::之前 ，你必须应用你的风格。

Answer 11

这对我有效

 input[type=text]:focus{outline: none;} 

我使用引导3

Answer 12

你最好的select是右键单击>检查元素。

我正在使用Bootstrap 4，并没有任何build议，直到我做到这一点。

一旦我find相关代码在检查窗口中的位置，我复制并粘贴导致：焦点被勾勒为蓝色的相关代码并相应地进行更改。

这是在我的CSS工作的代码

 .btn.focus, .btn:focus { outline: 0; box-shadow: 0 0 0 0; }