为什么我无法删除 Twitter Bootstrap 中的蓝色 textarea 边框？答案

【问题标题】：How come I can't remove the blue textarea border in Twitter Bootstrap?为什么我无法删除 Twitter Bootstrap 中的蓝色 textarea 边框？
【发布时间】：2011-12-24 04:30:17
【问题描述】：

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

我怎么删不掉？

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

【问题讨论】：

标签： html css

【解决方案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;
}

【讨论】：

您忘记了 select 输入以使其完整。但很好;)
这个解决方案会影响很多复选框。您可以为所有输入事件指定文本输入类型，例如 input[type="text"]:hover, ..., input[type="text"]:focus, ... 等等。
我只需要 Twitter Bootstrap 4 的盒子阴影。

【解决方案2】：

引导程序 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

【讨论】：

【解决方案3】：

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

.box-shadow(none);

或者，如果您不使用 LESS：

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

【讨论】：

是的，这对我来说是盒子阴影，但由于某种原因它没有显示在 Firefox 控制台中

【解决方案4】：

试试这个，我认为这会有所帮助，您的蓝色边框将被移除：

outline:none;

【讨论】：

很好，这对我有用，但我也必须删除盒子阴影，它仍然不再是蓝色了，干杯。

【解决方案5】：

这对我有用

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

【讨论】：

本地试过了。它也适用于 BootrapCss 4.x ！谢谢
使用引导程序 4。谢谢。
是的，这就是版本 4 所需的全部内容。

【解决方案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;}

【讨论】：

【解决方案7】：

引导 4.0

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

visual example

【讨论】：

【解决方案8】：

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

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

【讨论】：

【解决方案9】：

引导程序 4

如果您不想用火箭筒杀死苍蝇，请使用 -webkit-appearance:none;顺便说一句，这也杀死了不错的滑块输入，并假设您正在使用引导表单 css 选择器“form-control”作为输入。

这是解决方案：

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

如果您想保留一个很小的蓝色轮廓，请保留边框颜色。

【讨论】：

【解决方案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;
}

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

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

添加这个样式你会找到你的答案

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

label::before 这就是你必须应用你的风格的地方。

【讨论】：

【解决方案11】：

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

textarea, label
{
    outline:0px !important;

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

编辑：我遇到了Ant Design textarea 的问题。这就是为什么这个解决方案对我有用。所以，如果你使用的是 Ant，那么就使用这个。

【讨论】：

【解决方案12】：

为了将来参考，您可以通过检查器计算出计算样式

【讨论】：

【解决方案13】：

使用outline: transparent; 使大纲看起来好像不存在，但仍提供对表单的可访问性。 outline: none; 将对可访问性产生负面影响。

来源：http://outlinenone.com/

【讨论】：

在可访问性方面，透明轮廓与完全没有轮廓有何不同？
@AdrianPauly outline: transparent 是展示性的（颜色）与完全没有显示。它给人的感觉是它不存在，但它确实存在。屏幕阅读器不关心演示，但他们确实关心是否实际显示了某些内容，这就是我们执行诸如 .element-invisible { position: absolute !important; 之类的事情的原因。剪辑：矩形（1px 1px 1px 1px）； /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px);溢出：隐藏；高度：1px；如果我们想在表单上隐藏一些东西，比如标签，而不是display:none。同样的想法。

【解决方案14】：

最好的办法是右键单击 > 检查元素。

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

在检查窗口中找到相关代码后，我复制并粘贴了导致 :focus 呈蓝色轮廓的相关代码并相应地进行了更改。

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

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

【讨论】：

【解决方案15】：

这对我有用

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

我正在使用引导程序 3

【讨论】：

【解决方案16】：

用这个解决了。在 bootstrap 3.x 和 4.0

上运行良好

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

使用此代码，您将从所有标签和类中删除轮廓。

【讨论】：

【解决方案17】：

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

*使用边框：无；而不是轮廓，因为焦点线是边框而不是轮廓。

【讨论】：

【解决方案18】：

对于仍在搜索的任何人。它既不是边框也不是盒子阴影。它实际上是“大纲”。所以只需设置outline: none; 来禁用它。

【讨论】：

【解决方案19】：

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

【讨论】：