Comment styliser CSS pour perdre le focus

CSS perd son focus

Dans la conception Web, il est souvent nécessaire d'ajouter des styles pour améliorer l'expérience d'interaction utilisateur. CSS est un outil très puissant qui nous permet de réaliser une variété d'effets et d'animations. En CSS, il existe un état appelé « état de focus » (:focus), qui indique que l'utilisateur interagit actuellement avec l'élément et que l'élément est « focalisé ». Lorsque vous entrez un élément avec la souris ou le clavier, l'élément obtient le focus et lorsque vous quittez l'élément, il perd le focus. Alors, comment styliser un CSS qui perd son focus ?

1. Styles de mise au point courants perdus

1. Couleur de la bordure

Dans l'état de mise au point, ajoutez une bordure à l'élément. Lorsque l'élément perd le focus, donnez à cette bordure la même couleur que la couleur d'arrière-plan de l'élément, ou rendez-la plus claire pour indiquer que l'élément a perdu le focus.

Par exemple, nous pouvons ajouter le style CSS suivant à l'élément d'entrée :

input:focus {
    outline: none;
    border: 2px solid #555;
}

input {
    outline: none;
    border: 2px solid #ccc;
}

Ici, nous utilisons les propriétés outline et border du CSS pour y parvenir. Lorsque l'élément d'entrée n'est pas focalisé, sa bordure est grise ; lorsque l'élément d'entrée est focalisé, sa bordure devient noire.

Il convient de noter ici que nous utilisons outline:none pour annuler le cadre en pointillés dans l'état de mise au point par défaut, sinon cela provoquerait des interférences visuelles.

2. Couleur d'arrière-plan

Lorsque l'élément obtient le focus, définissez une couleur d'arrière-plan pour lui ; lorsque l'élément perd le focus, restaurez la couleur d'arrière-plan à sa couleur d'origine.

Par exemple, lorsque l'utilisateur saisit du contenu dans la zone de saisie, la couleur d'arrière-plan de la zone de saisie peut être modifiée ; lorsque l'utilisateur soumet le formulaire, la couleur d'arrière-plan de la zone de saisie peut être restaurée.

input:focus {
    background-color: #fff;
}

input {
    background-color: #f6f6f6;
}

3. Couleur de la police

Lorsque l'élément obtient le focus, définissez une couleur différente pour son texte ; lorsque l'élément perd le focus, restaurez la couleur du texte à sa couleur d'origine.

Par exemple, nous pouvons ajouter le style CSS suivant à l'élément d'entrée :

input:focus {
    color: #333;
}

input {
    color: #666;
}

Lorsque l'élément d'entrée est mis au point, sa couleur de texte deviendra noire ; lorsque l'élément d'entrée perd le focus, la couleur du texte reviendra à la couleur du texte. gris d'origine.

2. Utilisez des pseudo-classes pour implémenter des styles flous

Certains styles flous courants sont mentionnés ci-dessus. En fait, ces styles sont tous implémentés via des pseudo-classes CSS. Les pseudo-classes CSS font référence à un ensemble spécial de sélecteurs qui ne sélectionnent pas l'élément lui-même, mais sélectionnent certains états de l'élément. Par exemple, nous pouvons utiliser le sélecteur :focus pour styliser l'état de focus d'un élément et le sélecteur :hover pour styliser l'état de survol d'un élément.

Étant donné que les pseudo-classes peuvent définir différents styles pour différents états d'un élément, elles sont très adaptées à l'implémentation de styles de focus perdu. Voici quelques pseudo-classes courantes et leur utilisation :

1 :focus

Ce sélecteur de pseudo-classe est utilisé pour sélectionner l'élément actuellement ciblé. Lorsque l'utilisateur clique ou appuie sur la touche Tab pour saisir un élément, l'élément sera mis au point, déclenchant ainsi le style :focus.

Par exemple, nous pouvons ajouter le style CSS suivant à l'élément d'entrée :

input:focus {
    outline: none;
    border: 2px solid #555;
}

input {
    outline: none;
    border: 2px solid #ccc;
}

2, :active

Ce sélecteur de pseudo-classe est utilisé pour sélectionner l'élément actuellement cliqué. Lorsque l'utilisateur clique sur un élément avec la souris, l'élément devient actif, déclenchant le style :active.

Par exemple, nous pouvons ajouter le style CSS suivant au bouton :

button:active {
    background-color: #f00;
}

button {
    background-color: #ccc;
}

Lorsque l'utilisateur clique sur le bouton, la couleur d'arrière-plan du bouton deviendra rouge.

3. :visited

Ce sélecteur de pseudo-classe est utilisé pour sélectionner les éléments des liens visités. Lorsque l'utilisateur clique sur un lien, le lien sera visité, déclenchant ainsi le style :visited.

Par exemple, nous pouvons ajouter le style CSS suivant au lien visité :

a:visited {
    color: #999;
}

Lorsque l'utilisateur visite ce lien, la couleur du lien passera au gris.

3. Résumé

L'état focus du CSS est un état très utile et est souvent utilisé dans la conception Web. L'ajout de styles d'état de focus aux éléments peut rendre les utilisateurs plus intuitivement conscients des éléments avec lesquels ils interagissent actuellement, améliorant ainsi l'expérience d'interaction. Qu'il s'agisse de la couleur de la bordure, de la couleur d'arrière-plan ou de la couleur du texte, la conception du style de perte de focus peut être réalisée grâce au sélecteur de pseudo-classe CSS. En maîtrisant ces compétences, je pense que vous pouvez améliorer encore davantage votre conception Web.

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!