Search code examples
javascriptcssoutlinesweetalert

Remove SweetAlert button outline on focus

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: enter image description here

This is how I wanted it to be: enter image description here

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?

Solution

  • .class:focus { overflow: hidden; }

    replace "class" with your required class