Bootstrap 4 使大纲不起作用答案

【问题标题】：Bootstrap 4 makes outline not workBootstrap 4 使大纲不起作用
【发布时间】：2018-04-30 11:28:54
【问题描述】：

Bootstrap 如何禁用 HTML 大纲属性？当我将表单控件类添加到我的输入时，“大纲：无；”不再有效。

<input class="form-control" style="outline:none;">

codepen：https://codepen.io/Eli92/pen/WXXbRa

我可以只使用我自己的 css 类进行此输入，但我想知道这里发生了什么，而且我太初学者了，无法提交错误报告。

我想删除轮廓的原因是为了将自己的轮廓添加到外部元素中，就像 Youtube 和大多数流行网站的搜索栏一样。

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-4

【解决方案1】：

实际上，每个窗体控件在获得焦点时都会应用边框和框阴影，所以设置

.form-control:focus {
  border: none;
  box-shadow: none;
}

应该去掉样式

【讨论】：

谢谢！这是正确的，引导框阴影看起来很像默认轮廓。让我感到困惑的是，我浏览了 chrome 控制台中的样式并取消选择了每种样式，但没有任何改变。原来我需要同时取消选择 box-shadow 和 webkit-box-shadow。
没问题，您知道，Chrome 控制台顶部还有一个过滤器，上面有一个按钮，上面写着:hov，允许您在悬停/活动/聚焦时查看样式

【解决方案2】：

我不知道你到底想知道什么。

希望我能正确回答。

元素的outline 是当你点击它时它周围的边框。在您的代码笔中，您设置了outline: none，因此当您单击它时不会发生任何事情。所以你的outline: none 工作得很好。

border 就是您在那里看到的东西。 Bootstrap 还在它周围设置了一个边框，所以如果你设置border:none，就我理解的问题而言，你会得到你的效果。

【讨论】：

【解决方案3】：

您的问题是引导程序定义了.form-control，并且该类将一些额外的属性分配给引导程序输入。

.form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-image: none;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

您想要添加到您的类以更改边框的是覆盖，以便有其他东西代替默认值。如果您真的不希望元素上没有边框，那么您希望将边框设置为 0px 厚

border: 0px;

codepen：https://codepen.io/anon/pen/eeeNZB

【讨论】：

【解决方案4】：

.form-control 在:focus 上应用box-shadow（不是轮廓）。删除它就像在 Bootstrap 中覆盖 .form-control:focus 声明一样简单：

.form-control:focus {
    box-shadow: none;
}

【讨论】：