Bootstrap button outline and after clicking outline

Question

Hello, I am trying to finish the border around the button of btn-primary and after click it shows light blue border adjusting outline:0 but it is useless. How can I remove the border from this button.

<!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>

My container and elements are also not showing the responsive behavior. Please help me to fix both issues. Which property in bootstrap btn-primary button handle these both borders.

score 1 · Answer 1 · answered Apr 14 '21 at 18:34

1

The outline type thing that appears around the button as soon as it is clicked is not actually the outline property, it's the box-shadow property.

So, to solve this problem just add this box-shadow: none !important to the css of that button.

answered Apr 14 '21 at 18:34

Roshan Kanwar

271
2
9

score 1 · Answer 2 · answered Apr 14 '21 at 18:35

1

Try this out, it's the active class throwing off your code.

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

Inside your Chrome inspector, you can toggle the button states to debug. This one uses a combination of both :active:focus

Codepen https://codepen.io/rickyhaswifi/pen/LYZMeoN?editors=1010

answered Apr 14 '21 at 18:35

Ricardo Bautista

106
3

Thank you, How can It be responsive? Instead of using bootstrap it is not showing responsive behavior? – Iram Apr 14 '21 at 18:41

score 1 · Accepted Answer · answered Apr 14 '21 at 18:43

Why are you declaring styling for buttons twice here?

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

}
button: focus{
    outline:0;
}

Also, styling using html components is a bad practice in web design. You should use class in most cases. For changing a particular element you should use id.

Answering to your question, it is a possible duplicate of Bootstrap button - remove outline on Chrome OS X that property around button when clicked is not outline, it is a box-shadow property. Remove your button styling definitions and replace them using this code:

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

}

Then the shadow after click will disappear.

On another note, it seems that you are already using bootstrap 5 and inheriting styles from it. However, you are redefining the primary button styles manually. Why? Your imported CSS file should automatically update the primary button style. Also, do not put a space between focus and :.

As for your responsiveness issue, make your form responsive using bootstrap library since you're already using it. https://getbootstrap.com/docs/4.0/components/forms/

hello, thank you for your cooperative response, Can you elaborate this line please? I want to clear this concept behind this line. — Iram, Apr 14 '21 at 19:03
"Your imported CSS file should automatically update the primary button style." — Iram, Apr 14 '21 at 19:04
By that, he means the bootstrap css files that you'd added using the cdn links. — Roshan Kanwar, Apr 14 '21 at 19:21
Just like @RoshanKanwar said. For your reference regarding the responsive issue, you will find a lot of codepens or snippets on mbootstrap. Try them out. — tunchunairarko, Apr 16 '21 at 10:12

Bootstrap button outline and after clicking outline

3 Answers3