Bootstrap 4使outline无法工作

Question

Bootstrap如何禁用HTML大纲属性？当我将表单控件类添加到我的输入时，"outline: none;“不再起作用。

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

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

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

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

Answer 1

实际上，当聚焦时，边框和框阴影应用于每个窗体控件，因此设置

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

应删除样式

Answer 2

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

希望我能回答正确。

单击元素时，元素的outline是其周围的边框。在您的代码中，您可以设置outline: none，这样当您单击它时不会发生任何事情。所以你的outline: none运行得很好。

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

Answer 3

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

.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 thick

border: 0px;

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