【问题标题】: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;
        }
        

        【讨论】:

          猜你喜欢
          • 2013-07-18
          • 1970-01-01
          • 1970-01-01
          • 2019-01-15
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2019-02-08
          相关资源
          最近更新 更多