10

here is the problematic bit of code

:root {
  --color-foreground-text-main: rgb(255, 72, 142);
  --color-foreground-text-sub: rgb(0, 114, 153);
}

html,
body {
  height: 100%;
}

img {
  max-width: 100%;
}

#cover {
  background: #222 url('Resources/img/cover.jpg') center center no-repeat;
  background-size: cover;
  color: var(--color-foreground-text-main);
  height: 100%;
  text-align: center;
  display: flex;
  align-items: center;
}

#cover-caption {
  width: 100%;
}

#subscribe-button {
  text-align: center;
  background: var(--color-foreground-text-main);
  color: white;
  outline: 0;
}

#subscribe-button:hover {
  background: var(--color-foreground-text-sub);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <!--Mandatory meta tags-->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!--Bootstrap CSS-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  <!--Custom Styles-->
  <link rel="stylesheet" href="SP_BaseStyle.css" />
  <title>School Project</title>
</head>

<body>
  <section id="cover">
    <div id="cover-caption">
      <div class="container">
        <div class="col-12">
          <br>
          <div class="row">
            <div class="p-0 pr-1 pb-1 m-0 
                        col-12 col-sm-6 col-md-5">
              <label class="sr-only">Name</label>
              <input type="text" class="form-control form-control-lg" placeholder="George Smith">
            </div>
            <div class="p-0 m-0 pr-1 pb-1 
                        col-12 col-sm-6 col-md-5">
              <label class="sr-only">Email</label>
              <input type="text" class="form-control form-control-lg" placeholder="[email protected]">
            </div>
            <button type="submit" class="btn btn-lg mb-1
                        col-12 col-md-2" id="subscribe-button">Subscribe!</button>
          </div>
          <a href="#nav-main" class="btn btn-secondary btn-lg" role="button">&darr;</a>
        </div>
      </div>
    </div>
  </section>

  <!-- jQuery library -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

  <!-- Popper -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

  <!-- Latest compiled and minified Bootstrap JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

  <!-- Initialize Bootstrap functionality -->
  <script>
    // Initialize tooltip component
    $(function() {
      $('[data-toggle="tooltip"]').tooltip()
    })

    // Initialize popover component
    $(function() {
      $('[data-toggle="popover"]').popover()
    })
  </script>
</body>

</html>

after clicking the button out of nowhere a dark blue outline appears around the button. I looked around forums and the Bootstrap Docs about it but I cannot seem to find a way to change it's color or remove it altogether

I have tried setting the outline and the box shadow without any success.

NOTE: I know it is a visual queue that should not be removed and prefer just changing the color of it but if I cannot do it other way I would want to remove it internally and add it in CSS.

EDIT: Just for clarification we are talking about the 'subscribe' button not the arrow button. I am adding the code with the suggested changes. Also removing the border for clarity.

4
  • 2
    outline: 0 lol
    – Pedram
    Commented Oct 22, 2017 at 12:13
  • @pedram it does not work even with that. I still see the light blue border and a dark blue outline(which I want gone) Commented Oct 22, 2017 at 12:16
  • I removed the border and tried the outline property, sadly it does not do anything. it happens both on Chrome and on Edge so it is not browser specific. Commented Oct 22, 2017 at 12:20
  • check updated answer below
    – Pedram
    Commented Oct 22, 2017 at 12:25

3 Answers 3

12

I thought it was outline but not, of course i didn't saw your code, but after i see, the problem is here:

border: 2px var(--color-foreground-text-sub) solid;

remove this line. that's all.

Edit: and after click, override this:

.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: none!important;
}

:root {
  --color-foreground-text-main: rgb(255, 72, 142);
  --color-foreground-text-sub: rgb(0, 114, 153);
}

.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: none!important;
}

html,
body {
  height: 100%;
}

img {
  max-width: 100%;
}

#cover {
  background: #222 url('Resources/img/cover.jpg') center center no-repeat;
  background-size: cover;
  color: var(--color-foreground-text-main);
  height: 100%;
  text-align: center;
  display: flex;
  align-items: center;
}

#cover-caption {
  width: 100%;
}

#subscribe-button {
  text-align: center;
  background: var(--color-foreground-text-main);
  color: white;
  outline: 0;
}

#subscribe-button:hover {
  background: var(--color-foreground-text-sub);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <!--Mandatory meta tags-->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!--Bootstrap CSS-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  <!--Custom Styles-->
  <link rel="stylesheet" href="SP_BaseStyle.css" />
  <title>School Project</title>
</head>

<body>
  <section id="cover">
    <div id="cover-caption">
      <div class="container">
        <div class="col-12">
          <br>
          <div class="row">
            <div class="p-0 pr-1 pb-1 m-0 
                        col-12 col-sm-6 col-md-5">
              <label class="sr-only">Name</label>
              <input type="text" class="form-control form-control-lg" placeholder="George Smith">
            </div>
            <div class="p-0 m-0 pr-1 pb-1 
                        col-12 col-sm-6 col-md-5">
              <label class="sr-only">Email</label>
              <input type="text" class="form-control form-control-lg" placeholder="[email protected]">
            </div>
            <button type="submit" class="btn btn-lg mb-1
                        col-12 col-md-2" id="subscribe-button">Subscribe!</button>
          </div>
          <a href="#nav-main" class="btn btn-secondary btn-lg" role="button">&darr;</a>
        </div>
      </div>
    </div>
  </section>

  <!-- jQuery library -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

  <!-- Popper -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

  <!-- Latest compiled and minified Bootstrap JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

  <!-- Initialize Bootstrap functionality -->
  <script>
    // Initialize tooltip component
    $(function() {
      $('[data-toggle="tooltip"]').tooltip()
    })

    // Initialize popover component
    $(function() {
      $('[data-toggle="popover"]').popover()
    })
  </script>
</body>

</html>

0
10

Just add this to your css:

button:focus {outline:0;}
1

That's small property named "outline" is mostly placed in pseudo classes. So to avoid it you may use outline:none or outline:0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.