::placeholder CSS sélecteur

Définition de la CSS ::placeholder.

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

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

Le pseudo-élément de feuille de style ::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 ::placeholder.

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

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

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

Le pseudo-élément CSS ::placeholder pose des problèmes car il n'est pas reconnu (10-2016).

Règles de syntaxes CSS pour ::placeholder.

Comprendre l'écriture de ::placeholder

Le pseudo-élément CSS ::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 à ::placeholder.

Pour schématiser, il faut imaginer que par défaut le pseudo-élément CSS ::placeholder s'écrit *::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 ::placeholder avec règle
textarea::placeholder{
  /* Propriétés CSS assignées à l'ensemble des balises TEXTAREA */
}
.regle::placeholder{
  /* Propriétés CSS assignées à l'ensemble des balises concernées par l'attribut placeholder ayant comme classe "regle" */
}
:disabled::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 ::placeholder avec ciblage de parent
.identifant textarea::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::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::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 ::placeholder

Détails des versions de la CSS ::placeholder
Résumé du support navigateurs de la CSS ::placeholder

Sélecteurs CSS préfixées de ::placeholder

Vous trouverez ci-dessous les propriétés CSS préfixées équivalentes au sélecteur ::placeholder CSS :

Voici les versions préfixées du pseudo-élément de feuille de style ::placeholder:

Exemple de Css ::placeholder
 /* Mozilla Firefox 4 to 18  */
:-moz-placeholder{ /* Propriétés */ }

/* Mozilla Firefox 19+*/
::-moz-placeholder{ /* Propriétés */ } 

/* Safari, Google Chrome, Opera 15+, nternet Explore 13+ */
::-webkit-input-placeholder{ /* Propriétés */ } 

/* Internet Explore 10+ */
:-ms-input-placeholder{ /* Propriétés */ }

/* W3C */
::placeholder{ /* Propriétés */ }

Attention :-moz-placeholder et :-ms-input-placeholder doivent être déclarés seul :

Exemple de Css ::placeholder
/* Ne pas faire */
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder,
::-webkit-input-placeholder,
::placeholder{ /* Propriétés */ }

/* Bonne écriture */
:-moz-placeholder,
::-moz-placeholder{ /* Propriétés */ } 

:-ms-input-placeholder{ /* Propriétés */ }

::-webkit-input-placeholder,
::placeholder{ /* Propriétés */ }

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

Votez pour la définition CSS ::placeholder

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

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