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

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.

Answer 2

Try this change border-color to anything which you want

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

Answer 3

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

Answer 4

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.

Answer 5

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/

Answer 6

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.