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