How to remove outline in bootstrap 4 - html

Question

I want to remove textbox outline in bootstrap 4 but its not working. How can I remove this line?
CSS
#content #main-content input[type=text]{
border: 0;
border: 1px solid #ccc;
height: 40px;
padding-left: 10px;
outline: 0;
}
html
<div class="form-group">
<label for="title">Title <span>*</span></label>
<input type="text" class="form-control" id="title" name="title" placeholder="Enter Title">
</div>

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

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.

Answer 3

As the accepted answer works it isn't the best option.
You could simply override the input/button outline by editing the variables. (As the question specifically asks for bootstrap 4)
If you override the Bootstrap 4 variables like so. You could use the following code to disable all focus outlines:
$input-btn-focus-box-shadow: none;
$input-btn-focus-width: 0;
For only disabling the button focus outline use the follow code:
$btn-focus-box-shadow: none;
This you could also be done for indicators, select, dropdown etc. Just search the default variables list of bootstrap 4
EDIT
Also works for v5: Github variables
Even though you can disable the focus outline, it isn't a best practice. Conform the web accessibility keyboard standards a site should be useable by tabbing. By disabling the CSS you disable this functionality.
To separate these users there is a new pseudo class: :focus-visible which you can use however it's not compatible everywhere yet. Chromium changelog

Answer 4

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

Answer 5

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

Answer 6

A very simple solution would be like this,
form .form-control:focus{
border-color: #0d6efd;
box-shadow: none;
}
we overwrite the .form-control bootstrap class.
I was facing the same issue I solved it using this trick in such a way that we don't have to think about importing CSS after bootstrap or something like that.
Note: #0d6efd is the color I wanted to give to my input element when it gets focused.

Answer 7

Using a box-shadow will not completely hide the outline in the button, and it doesn't work on inputs, text-boxes and other form controls...
Using the shadow-none will may have a slight and thin border, but it is much better than the former solution...Here's the code if you need assistance:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<form action="/search" method="get">
<center class="container">
<div class="input-group mb-3">
<input type="text" class="form-control shadow-none" placeholder="Search the web" aria-label="Username" aria-describedby="basic-addon1" required name="q" autocomplete="off">
<input type="submit" class="btn input-group-text shadow-none" id="basic-addon1" value="search">
</div>
</center>
</form>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>

Answer 8

If you are theming in scss
$input-btn-focus-box-shadow: none;

Answer 9

The below code just worked for me now and I sure do hope it helps somebody else too ..
.form-group input:focus{
outline:0px !important;
box-shadow: none !important;
}

Answer 10

This one line, taken from #tao works when adding a css style:
The inset, however, should be zero. (It will create a weird line in the latest Bootstrap 4.)
<input type="radio" style="box-shadow: inset 0 0 0 #ddd;">
'shadow-none' is not working anymore.

Answer 11

You just have to add
box-shadow: none
on focus event in CSS.
For example.
.box_style:focus{
border:none;
box-shadow:none;
}

Answer 12

Try the !important property in any css code. That will not overwrite other css.
Try this:
//for normal text box
input[type=text]{
border: 0 !important;
height: 40px;
padding-left: 10px;
outline: 0 !important;
}
//for selected/active text box
input[type=text]:focus{
border: 0 !important;
outline: 0 !important;
}
//for hovered text box
input[type=text]:hover{
border: 0 !important;
outline: 0 !important;
}

Answer 13

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 14

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