单击时如何删除按钮的焦点边框？答案

【问题标题】：How to remove the focus border of button when click?单击时如何删除按钮的焦点边框？
【发布时间】：2021-02-24 11:51:04
【问题描述】：

我正在使用 Bootstrap button，我希望当我点击它们时，焦点边框不应该出现在图标周围。代码如下。

<div class="btn-group">
    <button class="btn btn-link"> <img src="../images/icons/User.svg" class="svg"></button>
</div>

【问题讨论】：

试试这个按钮：focus { outline:0 !important; }
它不工作兄弟。
两个想法 - 首先 - 活动状态/焦点的边界是可访问性方面行动的重要指标（让用户知道他们做了什么/焦点 - 所以删除时要小心其次 - 不建议使用 !important，因为它对整个样式表都有影响。

标签： html css twitter-bootstrap

【解决方案1】：

使用此样式避免项目的焦点边框

button:focus {
    outline: none;
}

【讨论】：

【解决方案2】：

试一试

button:focus{
outline:0px;
}

也使用

 button:focus{
 outline:none !important;
 }

我必须编辑 !important 才能正常工作。

【讨论】：

没有其他答案这就是为什么我给你同样的答案

【解决方案3】：

使用outline:0; 或outline:none; 移除焦点边框

注意：在规则末尾使用!important 来覆盖引导程序声明

button:focus{
    outline:0 !important;
}

或

button:focus{
    outline:none !important;
}

【讨论】：

【解决方案4】：

在 Bootstrap 4 中，添加了禁用效果的“shadow-none”类。

使用 JQuery，您可以通过将“shadow-none”类添加到相关按钮来禁用效果。

  $(".btn-secondary").addClass("shadow-none");

【讨论】：

【解决方案5】：

它可以是以下一行或几行。

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

我认为您根本不需要:focus 部分，因为实际的引导按钮永远不会显示。至少我没有。也许可以尝试将!important 放在一边，以防它在没有它的情况下工作。

【讨论】：

它对我有用

【解决方案6】：

如果您使用的是 Bootstrap 4，请将此类添加到输入或按钮标签

shadow-none

【讨论】：

【解决方案7】：

之前的所有答案都不正确：

原因请看下文，我还在回答的底部添加了sn-p

/*incorrect*/
button:focus {
outline:none !important;
}

/*correct*/
.btn.btn-link:focus {
outline:none !important;
}

请详细了解“类”的 CSS 选择器

class ===>  using  .

id    ===>  using  #

CSS 选择器（也关于“类”）

https://www.w3schools.com/css/css_selectors.asp

用空格连接或分隔的“类”名称

https://stackoverflow.com/questions/16858926/class-names-concatenated-or-separated-by-a-space

请查看下面我在 sn-p 中运行的示例：

/*=============Button1===============*/
.button1 {
    width: 50px;
    height: 45px;
    background-color: #c4891b;
    background-image: url('http://order.uprintinvitations.com/photothumbs/089634f1-2a24-485e-81e9-192ac6c8de07.png');
    image-rendering: -webkit-optimize-contrast;
    background-size: 50px;
    background-repeat: no-repeat;
    border: none;
    transition: transform .5s;
}
/*for changing the colong on mouse over*/
.button1:hover {
    background-color: yellow;
    transform: scale(1.1);
}
/*for removing the outline*/
.button1:focus {
    outline: none;
}
/*=============Button1===============*/

.button2 {
    width: 50px;
    height: 45px;
    background-color: #c4891b;
    background-image: url('http://order.uprintinvitations.com/photothumbs/089634f1-2a24-485e-81e9-192ac6c8de07.png');
    image-rendering: -webkit-optimize-contrast;
    background-size: 50px;
    background-repeat: no-repeat;
    border: none;
    transition: transform .5s;
}
/*for changing the colong on mouse over*/
.button2:hover {
    background-color: yellow;
    transform: scale(1.1);
}

<table border='1'>
  <tr>
    <td>
      Button 1
      <br>(onclick
      <br>no outline)
    </td>

    <td>
      Button 2
      <br>(onclick
      <br>outlined)
    </td>
  </tr>

  <tr>
    <td>
      <button class='button1' id='' name='' value=''></button>
    </td>

    <td>
      <button class='button2' id='' name='' value=''></button>
    </td>
  </tr>
<table>

<a href='https://github.com/dicka-ks'>My Github -> Dicka</a>

https://github.com/dicka-ks

【讨论】：

【解决方案8】：

如果它们都不起作用，请添加以下 CSS 属性 -

box-shadow:none !important;

【讨论】：

【解决方案9】：

会有用的

.svg:focus {
    border: none;
    outline: none;
}

【讨论】：