删除焦点上的 SweetAlert 按钮轮廓答案

【问题标题】：Remove SweetAlert button outline on focus删除焦点上的 SweetAlert 按钮轮廓
【发布时间】：2015-11-14 19:05:11
【问题描述】：

我在我的 nodeJS 项目中使用 SweetAlert，它的工作方式非常棒，除了当我显示确认模式时，它会将焦点设置到确认按钮上，并得到这个可怕的轮廓。

是这样的：

这就是我想要的样子：

我已经尝试覆盖它的样式并将轮廓设置为无，但没有成功：

.sweet-alert button.confirm {
  outline: none !important; }

我也试过用这种风格去掉任何轮廓：

*:focus, *:active {
outline: 0 !important; }

这是我用来触发 SweetAlert 模式的代码：

swal({ title: "Confirmation", 
               text: "Are you sure you want to remove this credit card?", 
               showCancelButton: true,
               confirmButtonText: "Yes, remove it", 
               closeOnConfirm: true }, 
               doRemoveCard);

这是 sweetalert.min.js 中设置焦点的一段代码：

a=o.querySelector("button.confirm");a.focus()

关于如何摆脱这个大纲有什么想法吗？

【问题讨论】：

标签： javascript css outline sweetalert

【解决方案1】：

你可以试试这个 sweetalert2 v7.x.x

.swal2-popup .swal2-styled:focus { box-shadow: none !important; }

【讨论】：

【解决方案2】：

这个问题最初是在 2 年前发布的，但是对于那些在最新版本 (2.1.x) 中寻找解决方案的人来说：

.swal-button:focus {
  box-shadow: none;
}

【讨论】：

【解决方案3】：

.class:focus { 溢出：隐藏； }

用你需要的类替换“类”

【讨论】：

.class:focus 没有被 OP 提及。他们应该在哪里找到这个类以便更改它？

【解决方案4】：

实际上 .class 是可选的，您需要使用按钮类进行更改，例如 .sweet-alert button.confirm 使用检查元素工具查找类并设置其焦点概览隐藏在您的自定义 CSS 中。

【讨论】：

【解决方案5】：

使用 SweetAlert2 版本 8.0.5，您可能希望在您的 css 文件中添加一个全局 :focus 以防止出现蓝色轮廓

:focus {
    outline: none;
}

这对我有用。

【讨论】：

【解决方案6】：

使用伪类的特定选择器 :focus 去除 SweetAlert 的 X 关闭按钮中的轮廓（框阴影），并应用这些属性。只使用 :focus 是通用的，避免它，试试这个特定的 css 规则。

.swal2-close:focus {
    box-shadow: none !important;
}

【讨论】：

请不要只发布代码作为答案，还要解释您的代码的作用以及它如何解决问题的问题。带有解释的答案通常更有帮助，质量更高，更有可能吸引投票。

【解决方案7】：

这应该会有所帮助：

.sweet-alert button:focus {
     box-shadow: none;
}

【讨论】：