Remove SweetAlert button outline on focus

Question

I'm using SweetAlert on my nodeJS project and it's working like a charm, except by the fact that when I show a confirmation modal it sets the focus to the confirmation button and it gets this awful outline.

This is how it is:

This is how I wanted it to be:

I already tried to override it's styles and set outline to none, but it didn't worked:

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

I've also tried to get rid of any outline with this style:

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

This is the code I'm using to fire the SweetAlert modal:

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

This is the piece of code within sweetalert.min.js that sets the focus:

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

Any ideas on how can I get rid of this outline?

Answer 1

you can try this for sweetalert2 v7.x.x

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

Answer 2

This question was originally posted 2 years ago, but for those looking for a solution in the latest version (2.1.x) use:

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