我在我的nodeJS項目中使用了SweetAlert，它運(yùn)行得非常好，除了當(dāng)我顯示一個確認(rèn)模式時，它將焦點設(shè)置到確認(rèn)按鈕上，并得到這個可怕的輪廓。

事情是這樣的:

這就是我想要的:

我已經(jīng)嘗試覆蓋它的樣式，并設(shè)置輪廓為無，但它不工作:

.sweet-alert button.confirm {
  outline: none !important; }

我也嘗試過用這種風(fēng)格去掉任何輪廓:

*:focus, *:active {
outline: 0 !important; }

這是我用來啟動SweetAlert模式的代碼:

swal({ title: "Confirmation", 
               text: "Are you sure you want to remove this credit card?", 
               showCancelButton: true,
               confirmButtonText: "Yes, remove it", 
               closeOnConfirm: true }, 
               doRemoveCard);

這是sweetalert.min.js中設(shè)置焦點的一段代碼:

a=o.querySelector("button.confirm");a.focus()

有什么辦法可以讓我擺脫這個大綱嗎？

您可以在sweetalert2 v7.x.x上試試這個

. swa L2-popup . swa L2-styled:focus { box-shadow:無！重要； }

這個問題最初是在2年前發(fā)布的，但是對于那些在最新版本(2.1.x)中尋找解決方案的人來說，請使用:

.swal-button:focus {
  box-shadow: none;
}

。類別:焦點{ 溢出:隱藏；}

用您需要的類替換“類”

在SweetAlert的X關(guān)閉按鈕中使用一個特定的選擇器“偽類:焦點”來去除輪廓(框陰影),并應(yīng)用這些屬性。僅使用:焦點是一般的，避免它，嘗試這個特殊的css規(guī)則。

.swal2-close:focus {
    box-shadow: none !important;
}

實際上。類是可選的，你需要改變你的按鈕類。使用inspect element工具確認(rèn)查找類，并將它們的焦點概覽隱藏在自定義css中。

使用sweet alert 2 8 . 0 . 5版時，您可能希望在css文件中添加一個global :focus以防止出現(xiàn)藍(lán)色輪廓

:focus {
    outline: none;
}

這對我很有效。

這應(yīng)該有所幫助:

.sweet-alert button:focus {
     box-shadow: none;
}