How to Remove Outline in Bootstrap 4

How to remove outline in bootstrap 4

The theme you're using sets box-shadow to inset 0 -2px 0 #2196F3 on focus.

You need to override it, but not with none, because that would just remove it. You probably want it to remain at same value like when it's not focused. In short, you need this:

textarea:focus, 
textarea.form-control:focus, 
input.form-control:focus, 
input[type=text]:focus, 
input[type=password]:focus, 
input[type=email]:focus, 
input[type=number]:focus, 
[type=text].form-control:focus, 
[type=password].form-control:focus, 
[type=email].form-control:focus, 
[type=tel].form-control:focus, 
[contenteditable].form-control:focus {
  box-shadow: inset 0 -1px 0 #ddd;
}

Also note you need to load this CSS after Bootstrap CSS and the theme you're loading.

Bootstrap button - remove outline on Chrome OS X

I see .btn:focus has an outline on it:

.btn:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

Try changing this to:

.btn:focus {
  outline: none !important;
}

Basically, look for any instances of outline on :focused elements — that's what's causing it.

Update - For Bootstrap v4:

.btn:focus {
  box-shadow: none;
}

Remove outline of input field with form control

Try overriding form-control styles like this:

.form-control:focus {
  border-color: #ced4da; /* default B5 color or set your own color*/
  border: none !important; /* if you want to remove borders at all*/
  outline: none !important;
  box-shadow: none !important;
}  

How do I disable the border on bootstrap 4 cards

If you check the .card class has a border: 1px solid #e5e5e5;

To remove it simply override it to border: none;

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

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

cannot remove outline from dropdown

Looks like you're using bootstrap 4.4.x, which bootstrap-vue doesn't support yet.

Bootstrap made some changes in the 4.4.0 release to their reboot css that removed the previous styling that hides the outline from elements with tabindex="-1" that the dropdown has.

bootstrap-vue will fix this in the upcoming 2.2.0 release, but for now i would advise to use bootstrap 4.3.1 as recommended in the documentation.

Edit:
bootstrap-vue v2.2.0 has been released which fixes these issues.

Cannot remove bootstrap button border

Try this

#openPopup:focus {
    outline: none;
}

or

#openPopup:focus {
    outline: 0;
}

Remove default focus outline and change to different color

It's a box-shadow style applied on focus.

add this code to remove it:

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

You may add !important depending on your CSS order:

---

Related Topics