Existe-t-il un sélecteur CSS :blur et comment puis-je styliser les éléments lorsqu'ils perdent le focus ?

États de focus et de flou CSS

En CSS, vous pouvez utiliser le sélecteur :focus pour appliquer des styles à un élément qui a le focus. Cependant, il n'y a pas de sélecteur :blur pour représenter un élément qui a perdu le focus.

Pseudo-classes dynamiques et états d'élément

Pseudo-classes dynamiques, y compris :focus et :hover, représentent les états des éléments, pas les événements ou les transitions entre les états. Par conséquent, il n'y a pas de sélecteur :blur pour indiquer un élément qui vient de perdre le focus.

Application de styles sans sélecteur :blur

Pour appliquer des styles aux éléments qui sont pas au point, vous pouvez utiliser l'une de ces méthodes :

• Utilisez :not(:focus) (avec prise en charge limitée du navigateur) :

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

• Remplacer les styles par défaut pour les éléments ciblés :

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

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

Conclusion

Bien que CSS ne dispose pas de sélecteur :blur dédié, vous pouvez utiliser ces techniques pour appliquer des styles basés sur sur l'état de focus d'un élément.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!