2

nodeJSプロジェクトでSweetAlertを使用していますが、確認モーダルを表示すると確認ボタンにフォーカスが設定され、このひどいアウトラインが表示されるという事実を除いて、魅力的に機能しています。

これがその方法です： ここに画像の説明を入力

これが私が望んでいた方法です： ここに画像の説明を入力

私はすでにスタイルをオーバーライドしてアウトラインをなしに設定しようとしましたが、うまくいきませんでした:

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

私はまた、このスタイルでアウトラインを取り除こうとしました:

*: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 内のコードです。

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

このアウトラインを取り除く方法についてのアイデアはありますか?

4

7 に答える 7

1

.class:focus { オーバーフロー: 非表示; }

「クラス」を必要なクラスに置き換えます

于 2015-11-14T19:17:31.333 に答える
0

疑似クラス :focus の特定のセレクターを使用して、SweetAlert の X 閉じるボタンのアウトライン (ボックス シャドウ) を取り除き、これらのプロパティを適用します。:focus のみを使用するのが一般的です。これを避けて、この特定の css ルールを試してください。

.swal2-close:focus {
    box-shadow: none !important;
}
于 2020-12-11T18:47:43.113 に答える
0

実際に 。classはオプションです.sweet-alert button.confirmのようにボタンクラスで変更する必要があります.inspect要素ツールでクラスを見つけ、カスタムcssで非表示のフォーカスオーバービューを設定します.

于 2015-11-15T03:03:31.770 に答える