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

Posted 2023-03-05

【中文标题】如何在引导程序 4 中删除轮廓

【英文标题】：How to remove outline in bootstrap 4

【发布时间】：2018-07-07 03:00:25

【问题描述】：

我想删除 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>

【问题讨论】：

据我所知，这不会出现在 bootstrap4 中......共享工作小提琴或 codepen 链接......

我已经从bootswatch.com/materia下载了自定义css

您似乎在使用主题。您必须覆盖该主题。这意味着您必须为要更改的属性编写稍后应用的 CSS 规则，具有与主题相同的选择器，或者编写具有比主题更强大的选择器的 CSS 规则。如果没有minimal reproducible example，没有人可以帮助您。

不确定这是否具有相关性，但我在 bootstrap 4.5 中单击时删除按钮边框作为汉堡菜单时遇到了同样的问题...尝试了此处描述的所有内容，调整变量等等...但是我设法通过在我自己的css中设置以下内容来完成工作（当然是在加载引导程序之后）-> button:focus outline: 0px none;大纲：0px 自动-webkit-focus-ring-color；

【参考方案1】：

在任何 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;

【参考方案2】：

你只需要添加 盒子阴影：无 CSS 中的焦点事件。 例如。

.box_style:focus
       border:none;
       box-shadow:none;
   

【参考方案3】：

使用 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>

【参考方案4】：

一个非常简单的解决方案是这样的，

form .form-control:focus
  border-color: #0d6efd;
  box-shadow: none;

我们覆盖了 .form-control 引导类。 我遇到了同样的问题，我使用这个技巧解决了这个问题，我们不必考虑在引导后导入 CSS 或类似的东西。 注意：#0d6efd 是我想在输入元素获得焦点时赋予它的颜色。

【参考方案5】：

这样更好更短：

input[type="text"], textarea 
              outline: none;
              box-shadow:none !important;
              border:1px solid #ccc !important;
                                                 

【参考方案6】：

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

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

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

对于仅禁用按钮焦点轮廓，请使用以下代码：

$btn-focus-box-shadow: none;

这也可以用于指标、选择、下拉等。只需搜索默认的variables list of bootstrap 4

---

编辑

也适用于 v5：Github variables

即使您可以禁用焦点轮廓，这也不是最佳做法。符合 Web 可访问性键盘标准，网站应该可以通过 Tab 键使用。通过禁用 CSS，您将禁用此功能。

为了区分这些用户，有一个新的伪类：:focus-visible，您可以在任何地方使用它，但 it's not compatible。 Chromium changelog

【讨论】：

谢谢。第一个有效，但仅适用于输入。对于按钮，我找到了 $input-btn-focus-width，应该设置为 0。以防万一有人找到这个答案。

@soeik 你的评论救了我的命！

【参考方案7】：

据我从您的 css 中看到，您将边框设置为 0，然后再次设置为 1。如下所示替换它

#content #main-content input[type=text]
 border: 1px solid #ccc;
 border: 0;
 height: 40px;
 padding-left: 10px;
 outline: 0;

【参考方案8】：

这一行，取自@tao，在添加css样式时起作用：

但是，插图应该为零。 （它会在最新的 Bootstrap 4 中创建一条奇怪的线。）

<input type="radio" style="box-shadow: inset 0 0 0 #ddd;">

'shadow-none' 不再起作用了。

【参考方案9】：

下面的代码现在对我有用，我当然希望它也能帮助其他人..

.form-group input:focus
     outline:0px !important; 
     box-shadow: none !important;
  

【参考方案10】：

如果你在 scss 中进行主题化

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

【参考方案11】：

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

【讨论】：

简单的解决方案在 2019 年仍然有效 :) 我将它用于作为 bootstrap 4 下拉列表一部分的按钮

这是一个非常优雅的解决方案，也适用于按钮。为什么这不是公认的答案？

不是一个“我也是”的人，但这很好用。从来不知道这个类的存在。像这样的花絮与我的学生分享:)

很高兴听到这个消息，@Woody。我也不知道它的存在，直到有一天我认为必须有更好的方法，我去挖掘 Bootstrap 的源代码。太糟糕了，它没有更好的记录。

2021 年为我工作 ;)

【参考方案12】：

您使用的主题将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。

【参考方案13】：

您必须在input:focus 上删除您的box-shadow。

将此 css 写入引导 css 下方的自定义 css 文件中以覆盖。如果您使用自定义父类，这将是一个很好的做法。

.parent-class .form-group input[type=text]:focus,
.parent-class .form-group [type=text].form-control:focus, 
  box-shadow: none;

【参考方案14】：

将此添加到input: focus

 -webkit-box-shadow: none;
box-shadow: none;
outline: -webkit-focus-ring-color auto 0px;
background-color: rgb(250,250,250);