删除焦点上的SweetAlert按钮轮廓

Question

我在我的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()

关于如何摆脱这个大纲的任何想法？

Answer 1

  

.class：focus {       溢出：隐藏; }

替换＆＃34; class＆＃34;与您所需的课程

Answer 2

此问题最初发布于2年前，但对于那些在最新版本（2.1.x）中寻找解决方案的用户：

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

Answer 3

您可以在sweetalert2 v7.x.x中尝试

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

Answer 4

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

Answer 5

使用SweetAlert2版本8.0.5，您可能需要在CSS文件中添加一个全局：focus来防止出现蓝色轮廓

:focus {
    outline: none;
}

这对我有用。

Answer 6

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

Answer 7

这应该有所帮助：

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