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; }

OR

: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; }

这是关于主题的主题：How to remove Firefox's dotted outline on BUTTONS as well as links?

Answer 3

outline: none;

这对我来说很有用。

Answer 4

这是一个大纲。使用outline:none; on：focus伪类来删除它。对我来说很好。

Answer 5

请勿删除焦点样式的大纲，这样您的网站就不会被仅限键盘的用户和低视力用户访问。

如果您选择在样式表中添加:focus { outline: none; }之类的内容，还可以添加拥有焦点元素的样式。

阅读：Never remove CSS outlines

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

5 个答案: