这是有问题的代码
: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">↓</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 Docs，但我似乎无法找到改变它的颜色或完全删除它的方法
我尝试过设置轮廓和方框阴影但没有成功。
注意：我知道它是一个不应删除的可视化队列，而只是更改它的颜色，但如果我不能以其他方式执行，我会想要在内部删除它并将其添加到CSS中。
编辑：为了澄清我们正在讨论的是订阅＆＃39;按钮不是箭头按钮。我正在使用建议的更改添加代码。为清晰起见，也要删除边框。
答案 0 :(得分：5)
只需将此添加到您的css：
button:focus {outline:0;}
答案 1 :(得分：2)
我认为它是outline但不是，当然我没有看到你的代码，但是在我看到之后，问题就在这里：
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">↓</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>
答案 2 :(得分：1)
那个名为＆＃34; outline＆＃34;主要放在伪类中。为避免这种情况，您可以使用outline:none或outline:0