我在 Sweet Alert 2 中作業了幾天，但我還沒有弄清楚如何更改關閉按鈕的顏色和輸入的背景顏色（直接來自 Sweet Alert 2），我知道我可能有創建類和做一些 CSS 的東西，但我不知道具體如何，互聯網示例對我沒有用 :(
所以這是一個非常簡單和恢復的代碼......
Swal.fire({
title: 'Hello',
text: 'Insert your name',
confirmButtonText: 'REGISTER',
background: 'orange',
input: 'text',
showCloseButton: true
});
我的疑惑很簡單，如何修改關閉按鈕的顏色？（右上角的“X”），以及如何修改輸入型別“文本”的背景顏色？（直接在警報中創建）
uj5u.com熱心網友回復：
假設我們有以下 CSS 類：
.customClose {
color: red!important;
}
.customInput {
background-color: lightsalmon;
}
我們可以使用mixin()來修改按鈕和preConfirm()來創建我們的自定義輸入欄位，如下所示：
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" >',
showCloseButton: true,
preConfirm: () => {
return [
document.getElementById('swal-input1').value
]
}
})
}
請注意，我們在async/await此處添加以在用戶單擊確認按鈕時從輸入欄位中檢索值。此外，我們需要在某些 css 屬性上添加!important以：
覆寫該特定屬性的所有先前樣式規則
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/497970.html
標籤：javascript css 甜蜜警报2
上一篇：求解矩陣中的最長路徑