Effets de focus

Fait partie de la section CSS Mastery du Journey HTML de Coddy — leçon 9 sur 43.

La pseudo-classe :focus vous permet de styliser un élément lorsqu'il reçoit le focus, par exemple lorsque vous cliquez dessus ou que vous naviguez à l'aide de la touche Tab du clavier. C'est un excellent moyen de mettre en évidence l'élément avec lequel vous interagissez ! Par exemple :

<input type="text">

Stylez l'élément input lorsqu'il reçoit le focus :

input {
  border: 2px solid #ccc;
}

input:focus {
  border-color: #4285f4;
  box-shadow: 0 0 5px rgba(66, 133, 244, 0.5);
}

Lorsque l'utilisateur clique sur ce champ de saisie ou y accède par tabulation, la bordure changera de couleur pour devenir bleue et une ombre bleue subtile apparaîtra autour de celui-ci.

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.

Défi

Facile

Créez une règle CSS qui applique un style spécial à un champ de saisie de texte lorsqu'il reçoit le focus.

Lorsqu'il a le focus, change la bordure en orange rgb(255, 152, 0)
Lorsqu'il a le focus, ajoute une couleur d'arrière-plan jaune rgb(255, 243, 224)

Aide-mémoire

La pseudo-classe :focus permet de styliser un élément lorsqu'il reçoit le focus (cliqué ou sélectionné via la touche Tab) :

input {
  border: 2px solid #ccc;
}

input:focus {
  border-color: #4285f4;
  box-shadow: 0 0 5px rgba(66, 133, 244, 0.5);
}

Cela modifie la couleur de la bordure et ajoute une ombre lorsque l'élément input a le focus.

Essayez vous-même

<!DOCTYPE html>
<html>
<head>
     <title>Focus Effects</title>
  <style>
    input{
      border: 2px solid gray;
      padding: 8px;
      outline: none;
    }
     /* Write your CSS here */
    
  </style>
</head>
<body>
  <h3>Focus Effects Demo</h3>
  <input type="text" placeholder="Type here...">
  <button>Click Me</button>
</body>
</html>

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.