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, textarea:focus, input:focus {         outline:0px !important;     } 

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

Answer 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