How to remove outline in bootstrap 4

Question

I want to remove textbox outline in bootstrap 4 but its not working. please let how can i remove this line.

CSS

Answer 1

You can add the shadow-none Bootstrap class to remove the focus outline:

<div class="form-label-group">
  <input type="password" id="inputPassword" class="form-control shadow-none" placeholder="Password" required>
  <label for="inputPassword">Password</label>
</div>

Answer 2

Add this on input: focus

 -webkit-box-shadow: none;
box-shadow: none;
outline: -webkit-focus-ring-color auto 0px;
background-color: rgb(250,250,250);

Answer 3

this is better, shorter, and greater

input[type="text"], textarea {
              outline: none;
              box-shadow:none !important;
              border:1px solid #ccc !important;
                                                 }

Answer 4

as far as i see from your css, you set the border to 0 then again to 1. replace it as below

#content #main-content input[type=text]{
 border: 1px solid #ccc;
 border: 0;
 height: 40px;
 padding-left: 10px;
 outline: 0;
}

Answer 5

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

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

Answer 6

You have to remove your box-shadow on input:focus.

Write this css in your custom css file below the bootstrap css to override. It will be good practice if you use your custom parent class.

.parent-class .form-group input[type=text]:focus,
.parent-class .form-group [type=text].form-control:focus, {
  box-shadow: none;
}