logo标签列表

如何在按钮被点击时移除焦点边框？

htmlcsstwitter-bootstrap
7

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

<div class="btn-group">
    <button class="btn btn-link"> <img src="../images/icons/User.svg" class="svg"></button>
</div>
尝试这个：button:focus { outline:0 !important; } - Sahil Manchanda
兄弟，它没起作用。 - Rana Aalamgeer
2
两个想法 - 首先 - 边框处于活动状态/焦点是可访问性行动的重要指标（允许用户知道他们所做的事情/焦点位置），因此在删除时要小心。其次 - 不应推荐使用!important，因为它将影响整个样式表。 - gavgrif
9个回答
7
请使用这种样式来避免项目上的焦点边框。
button:focus {
    outline: none;
}
4

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

注意：在规则末尾使用!important以覆盖Bootstrap声明

button:focus{
    outline:0 !important;
}

或者

button:focus{
    outline:none !important;
}
4

试一试

button:focus{
outline:0px;
}

另外使用

 button:focus{
 outline:none !important;
 }

我必须编辑!important，然后它才能正常工作。

没有其他答案，这就是为什么我给你相同的答案。 - Samudrala Ramu
3
在Bootstrap 4中，添加了“shadow-none”类以禁用效果。
使用JQuery，您可以通过将“shadow-none”类添加到相关按钮来禁用效果。
  $(".btn-secondary").addClass("shadow-none");
2
如果上述方法都不起作用，请添加以下CSS属性 -
box-shadow:none !important;
1

这可能是以下一行或多行的其中之一。

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

我认为你根本不需要:focus部分，因为实际的Bootstrap按钮从未显示。至少我没看到过。如果可以不用!important，那就尝试一下。

0
如果您正在使用Bootstrap 4，请将此类添加到输入或按钮标记中： shadow-none
0

所有之前的答案都是不正确的:

请看下面的原因，我还在我的回答底部添加了代码片段

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

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

请了解有关“class”的CSS选择器的更多信息。
class ===>  using  .

id    ===>  using  #

CSS选择器（关于“class”）

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

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

https://dev59.com/12Qn5IYBdhLWcg3wamfO

请查看下面在代码片段中运行的示例： 

/*=============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

0

它会工作的

.svg:focus {
    border: none;
    outline: none;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接