:before :after sur un input

Version imprimable

28/01/2013, 18h08
rodolphebrd

:before :after sur un input

Bonjour,

Pour la mise en forme d'un formulaire, je viens de lire des articles sur le sujet et notamment des posts sur ce forum.

Sur Safari, before appliqué à input fonctionne correctement mais pas sur FF ni Chr.

J'ai la solution alternative d'englober input d'un span.

Y-a-t-il une évolution sur ce sujet avec prise en compte sur les navigateurs récents (vue que ça marche sur Saf)?

Merci pour vos réponses.
28/01/2013, 19h53
NoSmoking

Bonjour,

Citation:

J'ai la solution alternative d'englober input d'un span.

il existe aussi les LABEL.

Montres nous néanmoins ce que essaies de faire.
28/01/2013, 20h04
rodolphebrd
Code:

<input type="text" name="fname" id="fname" placeholder="Nom ou Société" autocomplete="off" tabindex="1" class="txtinput">

Pour l'instant j'ai mis ça
Code:

1 2 #fname {background: #fff url('../img/form/users.png') 5px 4px no-repeat; }
et j'ai essayé avec #fname:before

Si vous souhaitez précéder le INPUT d'une image, votre technique n'est pas bonne (mais néanmoins faisable). Perso, j'utiliserais effectivement un LABEL:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
<!doctype html>
<html lang="fr-FR">
<head>
	<meta charset="UTF-8" />
	<title>Image précédant un input</title>
	<style type="text/css">
div::before {
        content: "\00A0\00A0\00A0\00A0"; /* Trois espaces */
        background: black url(http://www.developpez.net/forums/images/editor/smilie.gif);
}
label img {
        background-color: black;
        vertical-align: middle;
}
        </style>
</head>
<body>
<!-- AVEC UN ::BEFORE -->
<div>
	<input type="text" name="fname" id="fname" placeholder="Nom ou Société" autocomplete="off" tabindex="1" class="txtinput" />
</div>
<hr />
<!-- AVEC LABEL -->
<label for="fname">
	<img src="http://www.developpez.net/forums/images/editor/smilie.gif" />
	<input type="text" name="fname" id="fname" placeholder="Nom ou Société" autocomplete="off" tabindex="1" class="txtinput" />
</label>
</body>
</html>

J'ai essayé avec DISPLAY:LIST-ITEM en ajoutant une image comme puce, mais sans succès -_-

28/01/2013, 23h42
rodolphebrd

J'avais essayé en englobant input d'un span, auquel j'appliquais :before (comme votre div) mais ça faisait sauter mon placeholder.
28/01/2013, 23h51
rodolphebrd

Je pense avoir trouvé:

Code:

label[for="fname"]:before

Ça à l'air d'être stable.

Merci pour vos conseils à tous.