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

Posted 2023-03-06

【中文标题】单击时按钮周围出现不需要的轮廓或边框

【英文标题】：Unwanted outline or border around button when clicked

【发布时间】：2011-05-30 06:42:06

【问题描述】：

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

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

<button>this is my button</button>

【问题讨论】：

哪个浏览器？什么平台？能发个截图吗？

点击后我看不到任何边框..你能解释一下你在说哪个边框..吗？ jsfiddle.net/PQVnT/4

【参考方案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 模拟器。更新您的 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>

【参考方案2】：

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

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

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

【参考方案3】：

outline: none;

这在 Chrome 中对我有用。

【参考方案4】：

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

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

阅读：Never remove CSS outlines

【参考方案5】：

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