我想要去除bootstrap 4中的文本框轮廓线，但无法成功。如何去掉这条线？
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>
您可以添加shadow-none Bootstrap类来移除焦点轮廓：
<div class="form-label-group">
<input type="password" id="inputPassword" class="form-control shadow-none" placeholder="Password" required>
<label for="inputPassword">Password</label>
</div>
你正在使用的主题在focus时将box-shadow设置为inset 0 -2px 0 #2196F3。
你需要覆盖它，但不要用none，因为那只会将其删除。你可能希望保持其与未聚焦时相同的值。简而言之，你需要这样做:
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;
}
请注意，您需要在加载Bootstrap CSS和您正在加载的主题之后加载此CSS文件。
虽然接受的答案可行，但它并不是最佳选择。您可以通过编辑变量来简单地覆盖输入/按钮轮廓。 （由于问题特别要求Bootstrap 4）
如果您覆盖了Bootstrap 4变量 如此。 您可以使用以下代码禁用所有焦点轮廓：
$input-btn-focus-box-shadow: none;
$input-btn-focus-width: 0;
只需禁用按钮的焦点轮廓，使用以下代码：
只有禁用按钮聚焦轮廓时使用以下代码：
$btn-focus-box-shadow: none;
这也可以用于指标、选择、下拉列表等。只需搜索Bootstrap 4的默认变量列表
对于v5也适用：Github变量
即使您可以禁用焦点轮廓，但这并不是最佳实践。根据网络辅助功能键盘标准，一个网站应该能够使用制表符。通过禁用CSS，您将禁用此功能。
为了分离这些用户，有一个新的伪类：:focus-visible，你可以使用，但它还不兼容所有浏览器。 Chromium更改日志
您需要在input:focus上删除box-shadow。
请在Bootstrap CSS下面的自定义CSS文件中编写此CSS以进行覆盖。如果您使用自定义父类，这将是一个很好的实践。
.parent-class .form-group input[type=text]:focus,
.parent-class .form-group [type=text].form-control:focus, {
box-shadow: none;
}
input[type="text"], textarea {
outline: none;
box-shadow:none !important;
border:1px solid #ccc !important;
}
form .form-control:focus{
border-color: #0d6efd;
box-shadow: none;
}
我们覆盖了.bootstrap类的.form-control。 我也面临同样的问题，我用这个技巧解决了它，这样我们就不必考虑在引入bootstrap之后导入CSS之类的事情。 注意：#0d6efd是我想要给我的输入元素聚焦时的颜色。
使用box-shadow无法完全隐藏按钮的轮廓，并且它不适用于输入、文本框和其他表单控件...
使用shadow-none会有一条细小的边框，但比前面的解决方案好得多...如果需要帮助，以下是代码：
<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>.form-group input:focus{
outline:0px !important;
box-shadow: none !important;
}
你只需要在 CSS 的焦点事件中添加 box-shadow: none 例如：
.box_style:focus{
border:none;
box-shadow:none;
}
在任何CSS代码中尝试使用!important属性。这不会覆盖其他CSS。
试试这个：
//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;
}