引导按钮轮廓和单击轮廓后答案

【问题标题】：Bootstrap button outline and after clicking outline引导按钮轮廓和单击轮廓后
【发布时间】：2021-07-09 19:39:37
【问题描述】：

你好，我正在尝试完成 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 按钮中的哪个属性处理这两个边框。

【问题讨论】：

标签： html css

【解决方案1】：

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

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

}
button: focus{
    outline:0;
}

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

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

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

}

那么点击后的阴影就会消失。

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

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

【讨论】：

您好，感谢您的合作回复，您能详细说明一下这条线吗？我想澄清这条线背后的这个概念。
"您导入的 CSS 文件应该会自动更新主按钮样式。"
他指的是您使用 cdn 链接添加的引导 css 文件。
就像@RoshanKanwar 说的那样。对于响应式问题，您会在 mbootstrap 上找到很多 codepens 或 sn-ps，供您参考。试试看。

【解决方案2】：

试试这个，它是主动类抛出你的代码。

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

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

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

【讨论】：

谢谢，它如何响应？它没有显示响应行为，而不是使用引导程序？

【解决方案3】：

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

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

【讨论】：