How to customize SweetAlert2 styles

Question

I've been working a few days in Sweet Alert 2, but I havent figured out how to change the color of the close button and the background color of an input (made directly from the Sweet Alert 2), I know that I probably have to create classes and do some CSS stuff but I dont know exactly how, the internet examples havent worked for me :(

so here is a very simple and resumed code...

Swal.fire({
    title: 'Hello',
    text: 'Insert your name',
    confirmButtonText: 'REGISTER',
    background: 'orange',
    input: 'text',
    showCloseButton: true
});

My doubts are simple, How can I modify the color of the close button? (the 'X' in the top right), and How can I modify the background color of the input type 'text'? (which is created directly in the alert)

Answer 1

let's say we have the following css classes:

.custom-close {
  color: red!important;
}
.custom-input {
  background-color: lightsalmon;
}

We can use mixin() to modify the button and preConfirm() to create our custom input field like so:

window.onload = async () => {
  const swalCustomButton = Swal.mixin({
    customClass: {
      closeButton: 'custom-close'
    },
  })

  const { value: formValues } = await swalCustomButton.fire({
    title: 'Hello',
    background: 'orange',
    confirmButtonText: 'REGISTER',
    html: '<input id="swal-input1" placeholder="Insert your name" class="custom-input">',
    showCloseButton: true,
    preConfirm: () => {
      return [
        document.getElementById('swal-input1').value
      ]
    }
  })
}

Note that we're adding async/await here to retrieve the value from the input field when the user clicks the confirm button. Additionally, we need to add !important on certain css properties to:

override ALL previous styling rules for that specific property