Peut-on utiliser un sélecteur avant le <textarea>?

Question

J'expérimente avec quelques styles sur <textarea> s et j'ai essayé de faire quelque chose avec ::before et ::after sélecteurs et je ne pouvais rien faire pour les faire fonctionner. Donc la question est: est-ce possible? Je sais que les formes entourant le CSS sont plus que mystérieuses mais il semble que cela devrait fonctionner.

Answer 1

Le :before et :after ne fonctionnera pas sur un text-area (ni aucun élément qui ne peut pas contenir un autre élément, comme img ou input), parce que le contenu généré par des pseudo-élément se place au sein l'élément mais avant ou après le contenu de cet élément, et agit lui-même comme un élément. Le pseudo-élément n'est pas placé avant ou après l'élément parent lui-même (contrairement à certaines informations que l'on peut trouver sur Internet). Pour illustrer:

Si vous avez cette css:

p:before {content: 'before--'} 
p:after {content: '--after'} 

Puis html comme ceci:

<p>Original Content</p> 

rend efficacement à l'écran comme si le code source étaient:

<p>before--Original Content--after</p> 

Noncomme si le code source étaient:

before--<p>Original Content</p>--after 

Quelle est la raison pour laquelle les balises qui ne peut contenir aucun « contenu » élément html (comme ceux mentionnés ci-dessus) ne reconnaissent pas les pseudo-éléments, comme il n'y a pas de "lieu" pour que ce contenu soit généré. Le textarea peut contenir du "contenu", mais uniquement du contenu en texte pur.

Answer 2

En fait, vous pouvez ajouter du contenu avec :after sur un élément d'entrée. Cela ajoutera une sorte de conseil lorsque l'élément est dans son état actif:

#gallery_name { 
    position:relative; 
} 
#gallery_name:focus:after { 
    content: "Max Characters: 30"; 
    color: #FFF; 
    position: absolute; 
    right: -150px; 
    top:0px; 
} 

<input id="gallery_name" type="text" name="gallery_name" placeholder="Gallery Name">