Stylisation des états des éléments

10.1 Pseudo-classe :focus

Les pseudo-classes CSS offrent d'excellents outils pour styliser les éléments dans différents états. Grâce à elles, tu peux améliorer l'interaction des utilisateurs avec les formulaires et d'autres éléments interactifs sur une page web. Voyons comment utiliser les pseudo-classes :focus, :hover, :disabled et :checked pour styliser les éléments d'entrée (<input>).

La pseudo-classe :focus s'applique à un élément de formulaire lorsqu'il reçoit le focus. Cela se produit généralement lors d'un clic sur l'élément ou en naviguant avec la touche Tab. Styliser les éléments focusables aide les utilisateurs à mieux se repérer dans le formulaire.

Exemple d'utilisation :

    
      input:focus {
        border-color: #4A90E2;
        box-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
        outline: none;
      }
    
  

    
      <form>
        <label for="name">Nom:</label>
        <input type="text" id="name" name="name">
      </form>
    
  

Explication

• border-color: change la couleur de la bordure de l'élément lorsqu'il reçoit le focus
• box-shadow: ajoute un effet d'ombre autour de l'élément pour le mettre en évidence
• outline: supprime le contour par défaut du navigateur, le remplaçant par un style personnalisé

10.2 Pseudo-classe :hover

La pseudo-classe :hover s'applique à un élément lorsque l'utilisateur passe le curseur dessus. Cela peut être utile pour fournir un retour visuel lors de l'interaction avec l'élément.

Exemple d'utilisation :

    
      input:hover {
        border-color: #50E3C2;
        background-color: #F0F8FF;
      }
    
  

    
      <form>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email">
      </form>
    
  

Explication

• border-color: change la couleur de la bordure de l'élément lorsque le curseur est dessus
• background-color: change la couleur de fond de l'élément lors du passage du curseur

10.3 Pseudo-classe :disabled

La pseudo-classe :disabled s'applique aux éléments de formulaire qui sont désactivés, c'est-à-dire inactifs et ne peuvent pas être utilisés ou modifiés par l'utilisateur. Cela aide les utilisateurs à comprendre que l'élément n'est pas disponible pour l'interaction.

Exemple d'utilisation :

    
      input:disabled {
        background-color: #E0E0E0;
        color: #A0A0A0;
        cursor: not-allowed;
      }
    
  

    
      <form>
        <label for="username">Nom d'utilisateur:</label>
        <input type="text" id="username" name="username" disabled>
      </form>
    
  

Explication

• background-color: change la couleur de fond de l'élément désactivé pour montrer son inactivité
• color: change la couleur du texte à l'intérieur de l'élément désactivé
• cursor: définit le curseur sur l'état "not-allowed", pour montrer visuellement que l'élément n'est pas accessible

10.4 Pseudo-classe :checked

La pseudo-classe :checked s'applique aux éléments de type checkbox et radio qui sont dans un état sélectionné. Cela permet de styliser les éléments sélectionnés, les rendant plus visibles.

Exemple d'utilisation :

    
      input[type="checkbox"]:checked,
      input[type="radio"]:checked {
        background-color: #4A90E2;
        border-color: #4A90E2;
      }
    
  

    
      <form>
        <label>
          <input type="checkbox" name="option" checked>
          Option 1
        </label>
        <label>
          <input type="checkbox" name="option">
          Option 2
        </label>
        <label>
          <input type="radio" name="choice" checked>
          Choix 1
        </label>
        <label>
          <input type="radio" name="choice">
          Choix 2
        </label>
      </form>
    
  

Explication

• background-color: change la couleur de fond de l'élément sélectionné
• border-color: change la couleur de la bordure de l'élément sélectionné