如何删除bootstrap中的轮廓4

Question

我想在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>

Answer 1

您正在使用的主题设置box-shadow为inset 0 -2px 0 #2196F3开启focus.

你需要覆盖它,但不能覆盖它,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.

Answer 2

您可以添加shadow-noneBootstrap类以删除焦点轮廓：

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

由于公认的答案有效，因此它不是最佳选择。您可以通过编辑变量来简单地覆盖输入/按钮轮廓。（因为该问题专门要求引导程序4）

如果您像这样覆盖Bootstrap 4变量。您可以使用以下代码禁用所有焦点轮廓：

$input-btn-focus-box-shadow: none;

仅禁用按钮焦点轮廓使用变量 $btn-focus-box-shadow

您也可以完成指标，选择，下拉列表等操作。只需搜索引导程序4的默认变量列表即可