He estado trabajando unos dias en Sweet Alert 2, pero no he encontrado como cambiar el color del boton de cerrar y el color de fondo de una entrada (hecho directamente desde Sweet Alert 2), se que probablemente tenga para crear clases y hacer algunas cosas de CSS, pero no sé exactamente cómo, los ejemplos de Internet no me han funcionado :(
así que aquí hay un código muy simple y resumido ...
Swal.fire({ title: 'Hello', text: 'Insert your name', confirmButtonText: 'REGISTER', background: 'orange', input: 'text', showCloseButton: true });Mis dudas son simples, ¿Cómo puedo modificar el color del botón de cerrar? (la 'X' en la parte superior derecha) y ¿Cómo puedo modificar el color de fondo del tipo de entrada 'texto'? (que se crea directamente en la alerta)
digamos que tenemos las siguientes clases css:
.customClose { color: red!important; } .customInput { background-color: lightsalmon; }Podemos usar mixin() para modificar el botón y preConfirm() para crear nuestro campo de entrada personalizado así:
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 ] } }) } Tenga en cuenta que estamos agregando async/await aquí para recuperar el valor del campo de entrada cuando el usuario hace clic en el botón de confirmación. Además, debemos agregar !important en ciertas propiedades css para:
anular TODAS las reglas de estilo anteriores para esa propiedad específica