为什么我不能删除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;
}

Answer 2

Bootstrap 3

如果您只想更改颜色，请更改变量（推荐）：

更少或Customizer

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

Link to implementation

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

尝试将此更改边框颜色更改为您想要的任何内容

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

Answer 8

如果你是某个人，他仍然面临这个问题。

这是答案，感谢上帝。

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

您想知道为什么其他解决方案不适合您。

因为该风格实际上并未应用于单选按钮。

添加此样式，您将找到答案

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

标签::在之前你需要应用你的风格。

Answer 9

这是对我有用的。.所有其他解决方案对我都不起作用，但是我从其他解决方案中了解了一件事，并且它的默认样式为textarea和label组合负责蓝色边框。

textarea, label
{
    outline:0px !important;

    -webkit-box-shadow: none !important;
}

编辑：我在Ant Design文本区域遇到了这个问题。这就是为什么该解决方案对我有用的原因。因此，如果您使用的是Ant，请使用它。

Answer 10

为了将来参考，您可以通过检查员

计算出计算出的样式

Answer 11

使用outline: transparent;以使大纲显示为不存在但仍提供表单的辅助功能。 outline: none;会对可访问性产生负面影响。

来源：http://outlinenone.com/

Answer 12

您最好的选择是右键单击＆gt;检查元素。

我正在使用Bootstrap 4，在我这样做之前没有任何建议有效。

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

这是在我的css中运行的代码

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

Answer 13

BOOTSTRAP 4

如果您不想使用-webkit-appearance：none杀死带有火箭筒的苍蝇；

这还会杀死不错的sliderinput，并且假定您正在使用引导表单css选择器“ form-control”。

这是解决方案：

.form-control:focus {
    box-shadow: none!important;
    border-color: #ced4da!important;
}

如果要保留微小的蓝色轮廓，请保留边框颜色。

Answer 14

.was-validated .form-control:valid,
.was-validated .form-control:invalid {
    background-image: none;
    
    box-shadow: none;
}
.was-validated .form-control:invalid:focus,
.was-validated .form-control:valid {

    box-shadow: none;
}
.form-control:focus {
    outline: none;
    box-shadow: none;
}

Answer 15

对于仍在搜索的任何人。它既不是边框也不是盒子阴影。它实际上是“概述”。因此，只需设置outline: none;即可将其禁用。

Answer 16

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

*使用border：none;而不是轮廓线，因为焦点线是边框而不是轮廓线。

Answer 17

Bootstrap 4.0

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

visual example

Answer 18

解决了这个问题。适用于 bootstrap 3.x和4.0

* {
    outline:0px !important;
    -webkit-appearance:none;
}

使用此代码，您将从所有标记和类中删除大纲。

Answer 19

这对我有用

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

我正在使用bootstrap 3