Html 我怎么能'；t删除Twitter引导中的蓝色textarea边框？

在Chrome中，文本区域周围有一个蓝色边框

为什么我不能移除它

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

---

试试这个，我想这会有帮助，你的蓝色边框会被删除：

outline:none;

---

我相信那是一个阴影。试试这个：

.box-shadow(none);

或者，如果您没有减少使用：

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

---

您已写入

-webkit外观：无如下所示：

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

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

引导程序3
如果只想更改颜色，请更改变量（推荐）：

少或

无礼

如果不想将其完全删除，则必须覆盖设置轮廓的

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

CSS
如果您正在使用css，请通过以下方式覆盖它：

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


作为将来的参考，您可以通过检查器计算出计算样式
这对我很有用

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

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

使用
轮廓：透明以使大纲看起来好像不存在，但仍然提供对表单的可访问性<代码>大纲：无将对可访问性产生负面影响

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

这是答案，感谢上帝

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

标签：：在之前，这是你必须应用你的风格的地方。
这对我很有效

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

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

我正在使用bootstrap 3
尝试将边框颜色更改为您想要的任何颜色

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

最好是右键单击>检查元素

我正在使用Bootstrap4，在我这么做之前，所有的建议都不起作用

一旦我在inspect窗口中找到了相关代码的位置，我复制并粘贴了导致：focus被勾勒成蓝色的相关代码，并相应地对其进行了更改

这是在我的css中工作的代码

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

用这个解决了。在引导程序3.x和4.0上运行良好

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

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

有了这段代码，您将从所有标记和类中删除大纲。
这对我来说很有用。。所有其他解决方案对我来说都不太管用，但我从其他解决方案中了解到一件事，那就是
textarea
和
label
组合的默认样式是蓝色边框的原因

textarea, label
{
    outline:0px !important;

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

编辑：我对textarea有这个问题。这就是为什么这个解决方案对我有效。因此，如果您使用的是Ant，那么就使用它。
bootstrap4

如果您不想使用火箭筒杀死苍蝇-webkit外观：无；顺便说一句，这也会扼杀优秀的sliderinputs，并假定您正在使用引导表单css选择器“表单控件”进行输入

这就是解决方案：

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

如果您想保留一个小的蓝色轮廓，请将边框颜色去掉。
Bootstrap 4.0

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

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


*使用边框：无；而不是轮廓，因为焦点线是边框而不是轮廓。
对于仍在搜索的任何人。它既不是边框也不是框阴影。它实际上是“大纲”。所以只需设置
outline:none
禁用它。
很好，这对我来说很有效，但我也必须移除框阴影，但它仍然不再是蓝色，干杯。在可接受性方面，透明轮廓与完全没有轮廓有什么区别？@AdrianPauly
轮廓：透明
是呈现（颜色）与完全不显示。它给人的感觉是它不在那里，但它在那里。屏幕阅读器不关心演示文稿，但他们确实关心是否实际显示了某些内容，这就是我们之所以这样做的原因。元素不可见{位置：绝对！重要；剪辑：rect（1px 1px 1px 1px）；/*IE6，IE7*/clip:rect（1px，1px，1px，1px）；溢出：隐藏；高度：1px；}如果我们想隐藏表单上的某些内容，比如标签，而不是
display:none
。同样的想法。是的，这对我来说是一个方框阴影，但由于某些原因，它没有显示在firefox控制台中。您忘记了
选择
类型以使其完整。但是很好；）此解决方案将对复选框产生很大影响。您可以为所有输入事件指定文本输入类型tho，例如
input[type=“text”]：hover，…，input[type=“text”]：focus，
等等。我只需要Twitter引导4的框阴影。已在本地尝试过。它也适用于BootrapCss 4.x！感谢与引导4。谢谢。是的，这是版本4所需要的全部。
.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;
}