单击时按钮周围不需要的轮廓或边框

Question

我的网站上有一个样式按钮.但是当我点击它时,它会创建一个不需要的边框或轮廓(我不知道哪个).我该如何删除该边框？以下是与按钮相关的所有代码.

button {
    border: hidden;
    cursor: pointer;
    outline: none;
}

<button>this is my button</button>

Answer 1

使用这些CSS样式中的任何一种

a:active,
a:focus,
input,
input:active,
input:focus {
    outline: 0;
    outline-style:none;
    outline-width:0;
}  
a:active,
a:focus,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: none;
} 

要么

:focus {outline:none;} ::-moz-focus-inner {border:0;}

完成CSS样式部分后,您可能还需要设置IE-Emulator.更新您的Web应用程序web.config文件并包含以下密钥.

<system.webServer>
  <httpProtocol>
    <customHeaders>
      <clear />
      <add name="X-UA-Compatible" value="IE=7; IE=9; IE=8; IE=5;" />
    </customHeaders>
  </httpProtocol>

</system.webServer>

Answer 2

如果您正在谈论Firefox中的虚线,我认为您正在寻找的是:

button::-moz-focus-inner { border: 0; }

这是关于主题的一个主题:如何在BUTTONS上删除Firefox的虚线轮廓以及链接？

Answer 3

outline: none;

这在 Chrome 中对我有用。