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

This worked for me

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

Answer 2

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

Answer 3

Solved using this. Works fine on bootstrap 3.x and 4.0

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

With this code, you're going to remove outline from all tags and classes.

Answer 4

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 5

Bootstrap 4.0

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

visual example

Answer 6

This worked for me

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

i'm using bootstrap 3