Implémenter divers scénarios d'application du sélecteur de pseudo-éléments CSS::placeholder

Pour implémenter divers scénarios d'application du sélecteur de pseudo-éléments CSS::placeholder, des exemples de code spécifiques sont requis

Dans le développement Web, CSS est un langage de feuille de style couramment utilisé pour contrôler la mise en page et le style des pages Web. Le sélecteur de pseudo-élément ::placeholder est un nouveau sélecteur en CSS3, qui est utilisé pour modifier le style d'espace réservé des zones de saisie (y compris les zones de saisie de texte, les zones de saisie de mot de passe, etc.).

Ce qui suit vous présentera divers scénarios d'application et fournira des exemples de code correspondants.

1. Modifiez la couleur de l'espace réservé de la zone de saisie :

input::placeholder {
  color: red;
}

Dans le code ci-dessus, changez la couleur du texte de l'espace réservé de la zone de saisie en rouge.

2. Modifiez la taille de la police de l'espace réservé de la zone de saisie :

input::placeholder {
  font-size: 16px;
}

Dans le code ci-dessus, modifiez la taille de la police de l'espace réservé de la zone de saisie à 16 pixels.

3. Modifiez le style de police de l'espace réservé de la zone de saisie :

input::placeholder {
  font-family: 'Arial', sans-serif;
  font-style: italic;
}

Dans le code ci-dessus, changez le style de police de l'espace réservé de la zone de saisie en police Arial et affichez-le en italique.

4. Modifiez la couleur d'arrière-plan de l'espace réservé de la zone de saisie :

input::placeholder {
  background-color: yellow;
}

Dans le code ci-dessus, changez la couleur d'arrière-plan de l'espace réservé de la zone de saisie en jaune.

5. Modifiez la transparence de l'espace réservé de la zone de saisie :

input::placeholder {
  opacity: 0.5;
}

Dans le code ci-dessus, modifiez la transparence de l'espace réservé de la zone de saisie à 0,5, qui est un état semi-transparent.

6. Modifiez l'alignement de l'espace réservé de la zone de saisie :

input::placeholder {
  text-align: center;
}

Dans le code ci-dessus, alignez au centre le texte de l'espace réservé de la zone de saisie.

7. Modifiez le style de bordure de l'espace réservé de la zone de saisie :

input::placeholder {
  border: 1px solid red;
}

Dans le code ci-dessus, ajoutez une bordure rouge à l'espace réservé de la zone de saisie.

8. Modifiez l'effet d'animation de l'espace réservé de la zone de saisie :

input::placeholder {
  animation: placeholder 2s infinite;
}

@keyframes placeholder {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

Dans le code ci-dessus, ajoutez un effet d'animation en boucle infinie de 2 secondes à l'espace réservé de la zone de saisie afin que sa transparence soit de 0,5 à 50 %.

Grâce aux exemples de code ci-dessus, nous pouvons voir différents scénarios d'application du sélecteur de pseudo-éléments ::placeholder. Les développeurs peuvent utiliser ces codes de manière flexible pour implémenter des styles d'espace réservé de zone de saisie personnalisés en fonction de besoins spécifiques.

Il convient de noter que, étant donné que différents navigateurs ont différents niveaux de prise en charge du sélecteur de pseudo-éléments ::placeholder, si vous souhaitez vous assurer que le style peut être affiché normalement sur tous les navigateurs grand public, il est recommandé d'ajouter un préfixe de navigateur. au code, tel que :

input::-webkit-input-placeholder {
  /* Safari, Chrome, and Opera */
  color: red;
}

input::-moz-placeholder {
  /* Firefox 19+ */
  color: red;
}

input::-ms-input-placeholder {
  /* IE 10+ */
  color: red;
}

input::-moz-placeholder {
  /* Firefox 18- */
  color: red;
}

Cela garantit qu'il peut être affiché correctement sur différents navigateurs.

J'espère que les différents scénarios d'application du sélecteur de pseudo-éléments CSS::placeholder présentés dans cet article pourront vous être utiles. Si vous avez des questions, veuillez laisser un message pour en discuter.

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!