[html] 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;
    }

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.

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

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;

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

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.

Bootstrap 4.0

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

visual example

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

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

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.

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

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.

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.

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/

Try this change border-color to anything which you want

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

This worked for me

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

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

outline:none;

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