如何在引导程序 4 中删除轮廓

Question

我想删除 引导程序 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>

原文由 Sandeep 发布，翻译遵循 CC BY-SA 4.0 许可协议

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。

原文由 tao 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以添加 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>

原文由 John Dibling 发布，翻译遵循 CC BY-SA 4.0 许可协议