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

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

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

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

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;

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

outline:none;

This worked for me

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

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

Bootstrap 4.0

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

visual example

Try this change border-color to anything which you want

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

BOOTSTRAP 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.

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.

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::before thats where you have to apply your style.

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.

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

Use outline: transparent; in order to make the outline appear like it isn't there but still provide accessibility to your forms. outline: none; will negatively impact accessibility.

Source: http://outlinenone.com/

Your best bet is to right click > inspect the element.

I am using Bootstrap 4 and none of the suggestions worked until I did this.

Once I found where the relevant code was in the inspect window, I copied and pasted the relevant code that was causing the :focus to be outlined blue and changed it accordingly.

This is the code that worked in my css

.btn.focus, .btn:focus
{
outline: 0;
box-shadow: 0 0 0 0;
}

This worked for me

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

i'm using bootstrap 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.

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

*use border:none; instead of outline because the focus line is a border not a outline.

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

.was-validated .form-control:valid,
.was-validated .form-control:invalid {
    background-image: none;
    
    box-shadow: none;
}
.was-validated .form-control:invalid:focus,
.was-validated .form-control:valid {

    box-shadow: none;
}
.form-control:focus {
    outline: none;
    box-shadow: none;
}