25

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

button {
    border: hidden;
    cursor: pointer;
    outline: none;
}
<button>this is my button</button>

4

5 回答 5

26

使用这些 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 Style 部分完成后，您可能还需要设置 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>
于 2011-04-19T10:20:19.433 回答
12

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

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

这是一个关于该主题的线程：如何删除 Firefox 在 BUTTONS 和链接上的虚线轮廓？

于 2010-12-24T04:31:58.860 回答
6 
outline: none;

这在 Chrome 中对我有用。

于 2016-06-06T10:13:23.230 回答
3

请不要删除焦点样式的轮廓，这会使仅使用键盘和视力不佳的用户无法访问您的网站。

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

阅读：永远不要删除 CSS 轮廓

于 2017-07-06T08:38:38.573 回答
2

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

于 2017-07-25T07:59:49.977 回答