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

Question

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

How come I can\'t remove it?

textarea:hover, input:hover, textarea:active, input:active, texta         


        

Answer 1

Bootstrap 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

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

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

CSS

If you are using css overwrite it via:

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

Link to implementation

Answer 2

This is what worked for me.. All the other solutions didn't quite work for me, but I understood one thing from the other solutions and its that default styles of textarea and label in combination is responsible for the blue border.

textarea, label
{
    outline:0px !important;

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

EDIT: I had this issue with Ant Design textarea. Thats why this solution worked for me. So, if you are using Ant, then use this.

Answer 3

For future reference you can work out computed styles via an inspector

Answer 4

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

outline:none;

Answer 5

For anyone still searching. It's neither border or box-shadow. It's actually "outline". So just set outline: none; to disable it.

Answer 6

I believe that's a shadow. Try this:

.box-shadow(none);

Or if you're not using LESS:

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