0

For a Sweet Alert 2 pop-up confirmation window, if I set the attribute "allowEnterKey" to true, which is the default, then the confirmation button is focused automatically when the window pops up. Also, this button's color will be different than its regular color (e.g. the color when it is not focused or pressed)

On the other hand, if I set "allowEnterKey" to false, then this button will not be highlighted and the color will be its regular color. But the users will not be able to close the window by pressing the Enter key, which is not ideal for me.

So, how can I change the color of the button to its regular color when it is focused?

A sample pop-up confirmation window, where the button is highlighted and grey instead of its regular color blue

won ton
  • 3
  • 1
  • 3

1 Answers1

1

The documentation specifies color options: confirmButtonColor and cancelButtonColor.

swal({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  type: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, delete it!'
}).then((result) => {
  if (result.value) {
    swal(
      'Deleted!',
      'Your file has been deleted.',
      'success'
    )
  }
})

If that isn't sufficient, you can also apply custom CSS classes, e.g.:

confirmButtonClass: 'btn btn-success',
cancelButtonClass: 'btn btn-danger',
  • Thank you for your answer, but I need to change the color when the confirm button is focused or pressed, instead of the regular color of the confirm button. Is there a way to do that? – won ton Nov 09 '18 at 17:21
  • Yes, using CSS. See https://stackoverflow.com/questions/3898781/how-can-i-change-a-buttons-color-on-hover –  Nov 09 '18 at 17:22
  • I see. Thank you! – won ton Nov 09 '18 at 19:58