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

Solution 1:

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

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

Solution 2:

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

Solution 3:

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;

Solution 4:

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

outline:none;