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)
let's say we have the following css classes:
.customClose {
color: red!important;
}
.customInput {
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: 'customClose'
},
})
const { value: formValues } = await swalCustomButton.fire({
title: 'Hello',
background: 'orange',
confirmButtonText: 'REGISTER',
html: '<input id="swal-input1" placeholder="Insert your name" class="customInput">',
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