logo标签列表

单击按钮后移除其周围的蓝色边框

htmlcssbootstrap-4
10

这是有问题的代码片段

: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="george.smith@email.com">
            </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>

点击按钮后，突然出现了一个深蓝色的轮廓线。我在论坛和 Bootstrap 文档中寻找解决方法，但似乎无法更改其颜色或完全删除它。

我尝试设置轮廓线和盒子阴影，但都没有成功。

注意：我知道这是一个不应该被删除的视觉提示，最好只更改它的颜色，但如果没有其他方法，我想在 CSS 中将其内部删除并添加它。

编辑：仅为澄清，我们正在谈论“订阅”按钮而不是箭头按钮。我将添加带有建议更改的代码。同时为了清晰起见，删除边框。

2
outline: 0 哈哈 - Pedram
@pedram 即使这样也不起作用。我仍然看到浅蓝色的边框和深蓝色的轮廓（我想要消失）。 - EnvelopedDevil
我移除了边框并尝试了轮廓属性，但遗憾的是它没有任何作用。这在Chrome和Edge上都发生了，所以不是特定于浏览器的问题。 - EnvelopedDevil
请查看下面更新的答案。 - Pedram
3个回答
12

我原以为问题出在大纲中，但实际上我并没有看到你的代码。经过查看后，发现问题出在这里：

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

移除这行文字。就是这样。

编辑：并且在点击后，覆盖以下内容：

.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="george.smith@email.com">
            </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>

10

只需将以下内容添加到您的CSS中：

button:focus {outline:0;}
1

所谓的“outline”属性通常用于伪类中。为了避免它，您可以使用outline:none或outline:0

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接