Question

你好，我正在尝试完成 btn-primary 按钮周围的边框，单击后显示淡蓝色边框调整轮廓：0，但没用。如何从此按钮中删除边框。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
  <title>Document</title>

  <style>
    * {
      box-sizing: border-box;
    }
    
    .container {
      max-width: 520px;
      max-height: 180px;
      background-color: antiquewhite;
    }
    
    fieldset {
      max-width: 518px;
      max-height: 178px;
      padding-right: 15px;
      padding-left: 15px;
    }
    .btn{
        font-weight:600;
        color:#fff;
        text-align:center;
        vertical-align:middle;
        border:1px solid transparent;
        font-size:1.2rem;
        line-height:1.5;
    }
    .btn-primary {
  color: #fff;
  background-color: #1172f4;
  border-color: #000000;
}
.btn-primary: hover {
  color: #fff;
  background-color:#1172f4;
  border-color: black;
}
.btn-primary: focus, .btn-primary. Focus {
  color: #fff;
  background-color:#1172f4;
  border-color: #1875f6;
  box-shadow: 0 0 0 0.2rem rgba(38, 38, 38, 0.5);
}

.btn: focus, .btn. Focus {
  outline: 0;

}
button: focus{
    outline:0;
}



    /*.form-group{
        max-width:518px;
        
    }*/
  </style>

</head>

<body>
  <div class="container">
    <div class="row">

      <div class="col-sm-6 col-sm-offset-3 form-box">

        <form role="form" action method="post" class="registration-form" style="width:482px;height:175px;background-color:aqua;margin-left:5px;margin-right:5px;padding-left: 20px;padding-right: 20px;">

          <fieldset>
            <!--Start 2nd form field set-->
            <div class="form-bottom">
              <div class="form-group" style="margin-top:20px;width:100%;">

                <input type="text" name="form-email" placeholder="Enter Your email" class="form-email form-control" id="form-email">
              </div>
              <!--End of 2nd form groupdiv-->

              <button type="button" class="btn btn-primary btn-next" style="margin-top:20px;margin-bottom:20px;padding-right:15px;width:100%;">Get Started</button>
            </div>
            <!--End of bottom div-->

          </fieldset>
          <!--End of second form fieldset-->
        </form>

</body>

</html>

我的容器和元素也没有显示响应行为。请帮我解决这两个问题。 bootstrap btn-primary button 中的哪个属性处理这两个边框。

Answer 1

点击按钮后立即出现在按钮周围的轮廓类型实际上不是 outline 属性，而是 box-shadow 属性。

因此，要解决此问题，只需将此 box-shadow: none !important 添加到该按钮的 css 中即可。

Answer 2

试试这个，它是主动类扔掉你的代码。

.btn-primary:active:focus {
  box-shadow:none;
}

在 Chrome 检查器中，您可以切换按钮状态以进行调试。这个结合了 :active:focus

代码笔 https://codepen.io/rickyhaswifi/pen/LYZMeoN?editors=1010

Answer 3

你为什么要在这里两次声明按钮的样式？

.btn: focus, .btn. Focus {
  outline: 0;

}
button: focus{
    outline:0;
}

此外，使用 html 组件进行样式设置在网页设计中是一种不好的做法。在大多数情况下，您应该使用 class。要更改特定元素，您应该使用 id。

回答您的问题，点击按钮时按钮周围的属性可能是 Bootstrap button - remove outline on Chrome OS X 的重复项不是 outline，而是一个 box-shadow 属性。删除按钮样式定义并使用以下代码替换它们：

.btn:focus{
  box-shadow: none!important;

}

然后点击后的阴影就会消失。

另一方面，您似乎已经在使用引导程序 5 并从中继承样式。但是，您正在手动重新定义主要按钮样式。为什么？您导入的 CSS 文件应自动更新主按钮样式。另外，不要在 focus 和 : 之间放置空格。

至于您的响应问题，请使用引导程序库使您的表单响应，因为您已经在使用它。 https://getbootstrap.com/docs/4.0/components/forms/

Bootstrap 按钮轮廓和单击轮廓后

3 个答案: