html - 访问引导单选按钮

Question

我连续创建了一组单选按钮，但是当我切换按钮时，会出现以下轮廓:

我知道我必须将这些单选按钮的轮廓设置为 0，但我找不到访问它们的正确路径。我试着做了一些搜索，也尝试了一些自己的事情，但没有产生任何结果。我将发布我当前的脚本:

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css');

.btn-group {
  margin-top: 5px;
  background-color: yellow;
}

.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn btn-secondary {
  margin-bottom: 150%;
  outline: 0 none;
}

body {
  background-image: url(images/pubgbg.png);
  background-size: cover;
}

input[type=text] {
  width: 25%;
  margin-top: 20%;
  border-radius: 5px;
  outline: 0 none;
}

.text-center>img {
  margin-top: 50px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="text-center">
  <input type="text" name="searchplayer1" placeholder="Player1...">
  <input type="text" name="searchplayer2" placeholder="Player2...">
  <br>
  <div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-secondary active">
            <input type="radio" name="options" id="option1" autocomplete="off" checked> Europe
            </label>
    <label class="btn btn-secondary">
            <input type="radio" name="options" id="option2" autocomplete="off"> Korea/Japan
            </label>
    <label class="btn btn-secondary">
            <input type="radio" name="options" id="option3" autocomplete="off"> North America
            </label>
    <label class="btn btn-secondary">
            <input type="radio" name="options" id="option4" autocomplete="off"> Oceania
            </label>
    <label class="btn btn-secondary">
            <input type="radio" name="options" id="option5" autocomplete="off"> Kakao
            </label>
    <label class="btn btn-secondary">
            <input type="radio" name="options" id="option6" autocomplete="off"> South-East Asia
            </label>
    <label class="btn btn-secondary">
            <input type="radio" name="options" id="option7" autocomplete="off"> South America
            </label>
    <label class="btn btn-secondary">
            <input type="radio" name="options" id="option8" autocomplete="off"> Asia
            </label>
  </div>
  <br>
  <img src="images/PUBG-lg.png" alt="PUBGLogo" width="30%" height="30%">
</div>

如您所见，我尝试了一些方法，但没有成功。

Answer 1

这都是关于 .focus 类，javascript 将添加到 label 和 box-shadow 属性。添加这个类来修复它:

label.btn.focus{
    box-shadow:none;
}