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

所有关于javascript将添加到.focus和label媒体资源的box-shadow课程。添加此类以修复它：

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

Answer 2

要从Chrome开发人员工具进行调试和查找，请检查屏幕截图中显示的有效和关注选项，并在css下方应用，因为box-shadow正在创建围绕有效选项的大纲

label.btn.btn-secondary.active.focus{
   box-shadow:none
}

代码示例 - https://codepen.io/nagasai/pen/PRxqjo

Answer 3

尝试：

label:focus {border:none!important; box-shadow:none!important; outline:none!important:}

访问引导单选按钮

3 个答案: