CSS :blur セレクターはありますか? 要素がフォーカスを失ったときに要素をスタイルするにはどうすればよいですか?

CSS のフォーカスとぼかしの状態

CSS では、:focus セレクターを使用して、フォーカスのある要素にスタイルを適用できます。ただし、フォーカスを失った要素を表す :blur セレクターはありません。

動的擬似クラスと要素の状態

動的擬似クラス (:focus を含む)および :hover は、イベントや状態間の遷移ではなく、要素の状態を表します。したがって、フォーカスを失ったばかりの要素を示す :blur セレクターはありません。

:blur セレクターを使用しないスタイルの適用

フォーカスを失った要素にスタイルを適用するにはフォーカスが合っていない場合は、次のいずれかの方法を使用できます:

• 使用:not(:focus) (制限付きブラウザサポート):

input:not(:focus), button:not(:focus) {
    /* Styles for non-focused form inputs and buttons */
}

• フォーカスされたデフォルトのスタイルをオーバーライドします要素:

input, button {
    /* Default styles for all form inputs and buttons */
}

input:focus, button:focus {
    /* Override styles for focused form inputs and buttons */
}

結論

CSS には専用の :blur セレクターがありませんが、これらのテクニックを使用してスタイル ベースを適用できます。要素のフォーカス状態について。

以上がCSS :blur セレクターはありますか? 要素がフォーカスを失ったときに要素をスタイルするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。