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

How come I can't remove the blue textarea border in Twitter Bootstrap?

提问by user847495

In Chrome, there is a blue border around the textarea.

在 Chrome 中，textarea 周围有一个蓝色边框。

How come I can't remove it?

我怎么删不掉

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

回答by sandeep

You have write -webkit-appearance:none;like this:

你这样写-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;
}

回答by HaNdTriX

Bootstrap 3

引导程序 3

If you just want to change the color, change the variable (recommended):

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

Less or Customizer

少或定制

@input-border-focus: red;

variables.less

无变量

Sass

萨斯

$input-border-focus: red;

variables.sass

变量.sass

If you wan't to remove it completely, you'll have to overwrite the Mixinthat sets the outline.

如果您不想完全删除它，则必须覆盖设置大纲的Mixin。

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

CSS

CSS

If you are using css overwrite it via:

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

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

Link to implementation

链接到实施

回答by icktoofay

I believe that's a shadow. Try this:

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

.box-shadow(none);

Or if you're not using LESS:

或者，如果您没有使用 LESS：

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

回答by ALH

try this, I think this will help and your blue border will be removed:

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

outline:none;

回答by Jake Bown

This worked for me

这对我有用

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

回答by rjomir

This works 100%.

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

回答by Robins Gupta

Try this change border-color to anything which you want

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

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

回答by Vaisakh Rajagopal

If you are someone, who still face this issue.

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

Here is the answer, thanks god.

这是答案，感谢上帝。

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

You are wondering why others solution doesn't works for you.

您想知道为什么其他解决方案对您不起作用。

Because the style wasn't actually applied to radio button.

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

Add this style you will find your answer

添加此样式您将找到答案

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

label::beforethats where you have to apply your style.

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

回答by guido _nhcol.com.br_

BOOTSTRAP 4

引导程序 4

If you do not want to kill a fly with bazooka by use -webkit-appearance:none; which also kills nice sliderinputs btw and presuming you are working with the bootstrap form css selector "form-control" for your input.

如果你不想用火箭筒杀死一只苍蝇，请使用 -webkit-appearance:none; 顺便说一句，这也会杀死漂亮的滑块输入，并假设您正在使用引导程序表单 css 选择器“表单控制”进行输入。

This is the solution:

这是解决方案：

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

If you want to keep a tiny small blue outline the leave border-color out.

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

回答by AharrFaris

Bootstrap 4.0

引导程序 4.0

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

visual example

视觉示例