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?

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?

• javascript
• css
• outline
• sweetalert

8 Answers 8

you can try this for sweetalert2 v7.x.x

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

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;
}

.class:focus { overflow: hidden; }

replace "class" with your required class

Use an especific selector of pseudoclass :focus for get rid the outline (box-shadow) in the X Close button of SweetAlert, and apply these properties. Using only :focus is general, avoid it, try this especific css rule.

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

actually .class is optional you need to change with your button class like as .sweet-alert button.confirm find class with inspect element tool and set their focus overview hidden in your custom css.

Using SweetAlert2 version 8.0.5 you might want to add a global :focus in your css files to prevent a blue outline

:focus {
    outline: none;
}

This worked for me.

Well, you can easily overwrite the border/outline/box-shadow styles of confirmation button when focused using plan css, i used this css snippet and it worked like a charm for me

.swal2-container *:focus {
 border: none !important;
 outline: none !important;
 box-shadow: none !important; 
}

let me know if you are still facing any issues

That should help:

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