::-moz-placeholder CSS sélecteur

Définition de la CSS ::-moz-placeholder.

Le pseudo-élément CSS ::-moz-placeholder permet de cibler le texte de remplacement spécifié par l'attribut placeholder d'un élément.

Exemple de syntaxe CSS ::-moz-placeholder :
::-moz-placeholder {
  /* Propriétés */
}
identifiant::-moz-placeholder {
  /* Propriétés */
}

Le pseudo-élément de feuille de style ::-moz-placeholder Css peut modifier les propriétés :

  • qui concerne la modification de texte ( color, font[-*], size, alignement, letter-spacing, text-transform, etc...).
  • qui concerne la modification de l'arrière plan ( background[-*], etc...).

Conditions d'application de la CSS ::-moz-placeholder.

Le pseudo-élément de feuille de style ::-moz-placeholder CSS ne peut pas se déclarer dans l'attribut HTML ou XHTML STYLE.
Le pseudo-élément CSS ::-moz-placeholder doit être déclarée dans une balise HTML ou XHTML .

Le pseudo-élément feuille de style ::-moz-placeholder CSS s'applique sur toutes les balises (X)HTML acceptant l'attribut placeholder.

Problème d'interprétation de ::-moz-placeholder en Css.

Le pseudo-élément CSS ::-moz-placeholder pose des problèmes car il n'est pas reconnu que par Firefox.
Attention : par défaut il y a une propriété Css

Règles de syntaxes CSS pour ::-moz-placeholder.

Comprendre l'écriture de ::-moz-placeholder

Le pseudo-élément CSS ::-moz-placeholder s'applique à tous les éléments HTML ou XHTML acceptant l'attribut placeholder. Vous pouvez donc si nécessaire mettre un sélecteur devant pour conditionner la sélection, sinon les propriétés seront appliquées à l'ensemble des éléments HTML ou XHTML qui répondent à ::-moz-placeholder.

Pour schématiser, il faut imaginer que par défaut le pseudo-élément CSS ::-moz-placeholder s'écrit *::-moz-placeholder. "*" représente la condition soit "n'importe quel élément acceptant placeholder" (sélectionne tous les "placeholder" sans distinction).
Donc pour conditionner plus précisément la sélection, il faut juste remplacer "*" par un autre sélecteur qui vous permettra de distinguer l'élément que vous voulez sélectionner.
Ce sélecteur doit être unique (classe, id, balise ou pseudo-classe) ou multiple à condition de ne pas contenir d'espace entre chaque sélecteur, sinon on passe dans le cas d'un chemin de sélection pour sélectionner le parent (vous comprendrez mieux avec les exemples qui suivent).

Exemple d'écriture CSS de ::-moz-placeholder avec règle
textarea::-moz-placeholder{
  /* Propriétés CSS assignées à l'ensemble des balises TEXTAREA */
}
.regle::-moz-placeholder{
  /* Propriétés CSS assignées à l'ensemble des balises concernées par l'attribut placeholder ayant comme classe "regle" */
}
:disabled::-moz-placeholder{
  /* Propriétés CSS assignées à l'ensemble des balises concernées par l'attribut placeholder et qui correspondent à la règle  :disabled */
}

Maintenant, vous pouvez être plus précis pour cibler l'élément parent dans lequel vous voulez sélectionner les "placeholder", en mettant un chemin de sélection devant :

Exemple d'écriture CSS de ::-moz-placeholder avec ciblage de parent
.identifant textarea::-moz-placeholder{
  /* Propriétés CSS assignées à l'ensemble des balises TEXTAREA et dont le parent direct ou indirect a la classe "identifant" */
}
.identifant .regle::-moz-placeholder{
  /* Propriétés CSS assignées à l'ensemble des balises concernées par l'attribut placeholder ayant comme classe "regle" et dont le parent direct ou indirect a la classe "identifant" */
}
.identifant disabled::-moz-placeholder{
  /* Propriétés CSS assignées à l'ensemble  des balises concernées par l'attribut placeholder et qui correspondent à la règle  :disabled et dont le parent direct ou indirect a la classe "identifant" */
}

Compatibilités navigateurs du sélecteur ::-moz-placeholder

Sélecteur Css non préfixée de ::-moz-placeholder.

::-moz-placeholder CSS est une version préfixée de la propriété de feuille de style ::placeholder CSS pour le navigateur Firefox.

Reportez-vous au chapitre "Propriétés préfixées" de propriété Css ::placeholder pour voir les autres propriétés Css préfixées équivalentes, aussi que le code Css pour avoir un maximum de support navigateurs.

Votre avis sur la définition ::-moz-placeholder en CSS

Votez pour la définition CSS ::-moz-placeholder

  • 1/5
  • 2/5
  • 3/5
  • 4/5
  • 5/5

Avis sur la page https://www.zonecss.fr/proprietes-css/moz-placeholder-css-selector.html Votes: 5 / 5 - 2 votes
Cliquez sur une étoile pour voter.