Bootstrap 4 使大纲不起作用

Question

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

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

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

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

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

Answer 1

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

希望我能答对。

元素的 outline 是点击进入时围绕它的边框。在你的 codepen 中你设置了 outline: none 所以当你点击它时没有任何反应。所以你的 outline: none 工作得很好。

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

Answer 2

您的问题是 bootstrap 定义了 .form-control，并且一些额外的属性由此 class 分配给 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;
}

您想要添加到 class 以更改边框的内容是覆盖，以便有其他内容可以替代默认设置。如果你真的想要一个元素没有边框，那么你需要将边框设置为 0px thick

border: 0px;

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

Answer 3

.form-control 在 :focus 上应用 box-shadow（不是大纲）。删除它就像覆盖 Bootstrap:

中的 .form-control:focus 声明一样简单

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

Answer 4

实际上，边框和框阴影在聚焦时应用于每个表单控件，因此设置

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

应该删除样式

Bootstrap 4 使大纲不起作用

Bootstrap 4 makes outline not work

html

css

twitter-bootstrap

twitter-bootstrap-4