移除焦点上的 SweetAlert 按钮轮廓

Lea*_*ria 1 javascript css outline sweetalert

我在我的 nodeJS 项目上使用SweetAlert并且它的工作就像一个魅力,除了当我显示一个确认模式时它将焦点设置到确认按钮并且它得到这个可怕的轮廓。

这是它的样子: 在此处输入图片说明

这就是我想要的样子: 在此处输入图片说明

我已经尝试覆盖它的样式并将大纲设置为无,但它没有用:

.sweet-alert button.confirm {
  outline: none !important; }
Run Code Online (Sandbox Code Playgroud)

我也试图摆脱这种风格的任何大纲:

*:focus, *:active {
outline: 0 !important; }
Run Code Online (Sandbox Code Playgroud)

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

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

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

a=o.querySelector("button.confirm");a.focus()
Run Code Online (Sandbox Code Playgroud)

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

小智 5

你可以试试这个用于 sweetalert2 v7.xx

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