如何删除焦点按钮文本周围的虚线白色边框

Posted 2023-03-06

【中文标题】如何删除焦点按钮文本周围的虚线白色边框

【英文标题】：How to remove the dotted white border around focused button text

【发布时间】：2019-11-05 14:52:55

【问题描述】：

我需要但不能删除焦点按钮文本周围的白色虚线边框。

在阅读了有关“删除白色边框（尤其是Dotted border around link? 和内部链接）的文章后，我尝试了几种禁用轮廓的解决方案，例如"outline: 0; 或outline: none;，使用或不使用!important。

但没有什么能移除焦点按钮文本周围的白色虚线边框。 这是我最简单的测试页代码。我无法显示屏幕截图，因为它会移除按钮的焦点。

button 
  font-size: 87.5%;
  font-family: "ubuntu", Sans-serif;
  padding: 0 16px;
  min-width: 64px;
  height: 36px;
  cursor: pointer;
  background-color: royalblue;
  color: white;
  border: 0;


button:focus,
button:active 
  outline: none;
  outline: 0;
  outline: none !important;
  outline: 0 !important;

<button type="button">TEST</button>

在 Ubuntu 18.04 (Bionic Beaver) 上使用 Firefox 67.0.3，此页面仍然在焦点按钮文本周围显示虚线白色边框，我想删除它（我将使用我自己的方法显示焦点） .

【参考方案1】：

这些样式是在 UA 级别声明的，因此每个浏览器都有自己的实现（在 Firefox 中，还有用于定位它们的伪元素）。

在 Firefox 中，您可以使用 ::-moz-focus-inner 伪元素：

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner 
    border: none;
  

【讨论】：

另一个有用的信息：在 IE6 中，除非添加此元标记 <meta http-equiv="X-UA-Compatible" content="IE=9" />

，否则无法删除虚线

感谢 Adrift，它完美地完成了这项工作。由于“-moz-”，我认为“focus-inner”是 mozilla 独有的属性。我在哪里可以获得其他主要浏览器（IE、Chrome (Chromium)、Opera、Safar 的类似信息

@adrift ：有趣的是，即使是 mdm web docs（又名 mozilla devs docs）也不知道“::-moz-focus-inner”伪选择器......

@adrift，对于我的按钮，button::-moz-focus-inner 单独起作用，但 input[type="button"]::-moz-focus-inner 不起作用。

【参考方案2】：

你需要为不同的浏览器添加setback，例如：

button:focus,
button:active 
    -moz-outline: 0;
    -ms-outline:0;
    -o-outline: 0;
    -webkit-outline: 0;
 

这些是相关渲染引擎提供的供应商前缀属性（-webkit 用于 Chrome、Safari；-moz 用于 Firefox，-o 用于 Opera，-ms 用于 Internet Explorer）。通常，它们用于在 W3 最终澄清/定义之前实现新的或专有的 CSS 功能。

【参考方案3】：

只需设置边框：0 ，我已经更新了你的代码试试这个它会工作！

 <input type="button" value="text">

并且在样式标签中使用这个：-

 input[type="button"]::-moz-focus-inner 
            border: 0
        

【讨论】：

谢谢你，Ronack，我已经安装了它，它确实起作用了。不幸的是，我的页面预计将在第二天上线......我在哪里可以获得其他主要浏览器（IE、Chrome (Chromium)、Opera、Safari ......）的相同信息？

谢谢Kiranvj，我还用prefixFree，女巫的接缝是一样的。

如何检查 "::-webkit-focus-inner" 和 "::-o-focus-inner" 等在其他浏览器中是否会产生相同的影响？跨度>

【参考方案4】：

a::-moz-focus-inner 在 React Router 重定向莫名其妙地导致焦点边界的情况下对我不起作用。选择器本身没有激活。

暂时解决（但不满意）：

a::-moz-focusring 
  outline: none;