Question

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

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

Answer 1

尝试一次

 button:focus{
 outline:none !important;
 }

同时使用

for(int i=0; i<=Config.busSizeInView; i++){
            gc.drawImage(busStop, 10+i*Config.xSize/Config.busSizeInView, Config.ySize -100, 20, 20);
        }

我必须编辑！重要然后它才能正常工作。

Answer 2

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

button:focus {
    outline: none;
}

Answer 3

使用<?xml version="1.0" encoding="UTF-8"?> <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <AllowedMethod>PUT</AllowedMethod> <MaxAgeSeconds>600</MaxAgeSeconds> <AllowedHeader>*</AllowedHeader> </CORSRule> </CORSConfiguration>或outline:0;删除焦点边框

注意：在规则末尾使用outline:none;来覆盖Bootstrap声明

!important

或

button:focus{
    outline:0 !important;
}

Answer 4

在Bootstrap 4上，添加了“ shadow-none”类，以禁用该效果。

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

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

Answer 5

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

df = ks.from_pandas(pd.DataFrame(columns=['A', 'B', 'C']))

Answer 6

它是以下一行或几行。

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

我认为您根本不需要:focus部分，因为实际的引导按钮从未显示过。我至少不会。也许尝试将!important丢掉，以防它不起作用。

Answer 7

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

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

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

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

请详细了解 CSS Selector 关于“class”

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

请查看我在代码段中运行的示例：

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

Answer 8

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

box-shadow:none !important;

Answer 9

它会起作用

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

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

9 个答案: