CSS :before et :after sur un input text

Bonjour à tous et merci d'avance pour votre aide.

L'idée ici et de faire un skin d'un input text.
before et after auront en backgroud les côtés du skin et l'input text un background en repeat-x.

Je sais que d'autre technique existe, mais j'aurais voulu c'est celle-ci est possible.

.uiobjects input[type=text]{
	border: none;
	background-color: transparent;
	background-image: url('../images/ui/textboxM.png');
	background-position: center top;
	background-repeat: repeat-x;
}

.uiobjects input[type=text]:before{
	content: "";
	height: 25px;
	width: 10px;
	background-image: url('../images/ui/textboxL.png');
	background-position: left top;
	background-repeat: no-repeat;
}

...

Sous Firebug, le before est bien appliqué aux input text, mais rien ne s'affiche.

Merci à vous,
Modifié par Rifton007 (05 Apr 2013 - 20:31)

Hello,

as-tu joué sur le display de ton before/after ? Normalement ça fonctionne, je fais souvent ce genre de manip' pour mettre des feddbacks dans mes formulaires.

Ju

Pour ma part c'est la premiére fois que je tente la technique.
Je viens d'essayer Block, inline-block, ..., mais rien.
Modifié par Rifton007 (05 Apr 2013 - 20:32)

J'ai tenter un simple:

.uiobjects input[type=text]:before{
	content: "p";
}

Mais je n'obtient rien, reste à savoir pourquoi?

Bonjour,

il faut positionner vos blocs pour obtenir un effet

.uiobjects input[type=text]{
	border: none;
	background-color: transparent;
	background-image: url(#);
	background-position: center top;
	background-repeat: repeat-x;
	[b]position:relative;[/b]
}

.uiobjects input[type=text]:before{
	content: "";
	height: 25px;
	width: 10px;
	background-image: url(#);
	background-position: left top; [#darkred]/* à supprimer peut-être*/[/#]
	background-repeat: no-repeat;
	[b]position:absolute; 
	top:10px; /* à vous de gérer les axes*/
	left:0;[/b]
}

Modifié par rodolpheb (05 Apr 2013 - 21:03)

Bonsoir,
Tout comme sur a balise <img> ou <iframe>(ou d'autre avec des fonctions similaires) tu n'auras en principe aucun résultat, car ce sont déjà des balise qui injectent des contenus qui ne sont ni texte et qui ne peuvent contenir d'autre balises.
:before et :after permettent d'injecter/ajouter du contenu ... ou de le remplacer(mais la j'estime qu'il s'agit d'un defaut/bogue car a mon sens une mauvaise pratique .. vous avez dit SEO ?)

Enfin , en regle générale on ne cherchera pas a modifier le rendu des éléments de formulaire actifs:
1) pour des raisons de sécurité,
2) ce sont des element propre au navigateur et son OS .

Cdt,
GC

Bonsoir,
por commencer le contenu généré par des pseudo-éléments doit être déclaré comme valeur de la propriété content et non via un background.
Ensuite ça ne s'applique pas aux éléments qui ne peuvent pas faire office de conteneur.

Bonsoir @Hermann,

a écrit :
por commencer le contenu généré par des pseudo-éléments doit être déclaré comme valeur de la propriété content et non via un background.
Ensuite ça ne s'applique pas aux éléments qui ne peuvent pas faire office de conteneur.

Je ne comprends pas bien ton explication..

J'ai repris l'exemple ci-dessus pour y voir plus clair.

rodolpheb a écrit :
Bonsoir @Hermann,
por commencer le contenu généré par des pseudo-éléments doit être déclaré comme valeur de la propriété content et non via un background.
Ensuite ça ne s'applique pas aux éléments qui ne peuvent pas faire office de conteneur.

Je ne comprends pas bien ton explication..

J'ai repris l'exemple ci-dessus pour y voir plus clair.

Bonsoir,
Gc-nomade explique une partie du problème : il ne peut y avoir de contenu généré à partir d'éléments remplacés comme les input ou les images.
Modifié par Hermann (05 Apr 2013 - 23:21)

Effectivement je n'avais testé que sur safari sur lequel ça fonctionne et j'avais oublié que le sujet (que j'avais d'ailleurs lu!!) avait été abordé ici.

rodolpheb a écrit :
Effectivement je n'avais testé que sur safari sur lequel ça fonctionne et j'avais oublié que le sujet (que j'avais d'ailleurs lu!!) avait été abordé ici.

Ok alors on va dire que Safari n'est pas conforme à ce niveau là

En tout cas merci à vous tous pour ces éclaircissements.
Je vais donc passer par un span autour des input.
Modifié par Rifton007 (06 Apr 2013 - 04:18)