28172 sujets

CSS et mise en forme, CSS3

Bonjour,
J'étudie l' ouvrage de Raphael :CSS avancées Vers Html5 et CSS3, et page 39, à propos des pseudo-éléments :before et :after, on peut y lire:"balises autofermantes, à savoir
br, hr, img, input, select et textarea. Il me semblait que ces deux dernières devaient avoir une balise de fermeture.
Est ce que je me trompe ?
Merci par avance.
Bernard60
Administrateur
Bonjour Bernard60,

Ce n'est pas exactement ce qui est écrit.

Il est écrit

le-livre a écrit :
... ne sont pas applicables sur les éléments dépourvus de contenu (généralement distingués par des balises auto-fermantes), à savoir br, hr, img, input, select et textarea.


En clair, tous les éléments cités ne sont pas forcément constitués de balises auto-fermantes.
Ceci dit, tu as raison de soulever qu'il y a une erreur puisque select et textarea ne sont ni auto-fermants ni dépourvus de contenus.

Bonne journée Smiley smile
C'est dingue, je ne suis pas venu depuis des années et quand je viens poser une question, c'est le dernier sujet abordé !

Donc voilà, ok pour ça sauf que les spec semblent plutôt indiquer que :after et :before ne sot pas dispo pour les éléments remplacés (l'info n'est pas des plus certaines puisque dans les spec CSS2, ils se contentent de dire que ce sera détaillé plus tard - dans le temps).

Or, la propriété appearance, appliquée à un input par exemple, est censée en faire un élément non remplacé si j'en crois MDN.

Malheureusement, ça ne fonctionne pas et je ne peux pas styler les input très moches de PollDaddy à coup de :after Smiley decu

Raphael, penses-tu qu'il s'agit d'une mauvaise analyse de ma part ou d'une erreur d'implémentation sur Firefox (Chrome et Edge permettent l'utilisation de :after et :before sur l'élément input) ?
Modifié par escarmouche (28 Mar 2017 - 16:17)
Ben voilà, j'arrive et je repars : c'est bien un problème (ou pas selon le point de vue) de Firefox, qui faisait l'objet d'un ticket vieux de 5 ans et qui semble être corrigé sur Firefox 54.

Tant pis pour le style de mon sondage...

Bye !
Administrateur
Hello,

escarmouche a écrit :
(Chrome et Edge permettent l'utilisation de :after et :before sur l'élément input) ?


C'est intéressant ça, je l'ignorais.

As-tu un exemple concret ?
Je viens de tester et chez moi seul Chrome permet d'appliquer un pseudo-élement à un input (avec ou non appearance d'ailleurs) : http://codepen.io/raphaelgoetter/pen/ryqXaV