Placement icon dans un input

2 pièce(s) jointe(s)

bonjours, j'essaie de mettre un icon-connexionutilisateur a l'interrieur de l'imput a droite
mais sur google chrome c'est bon mis sur firefox il est hors de l'imput et pas a l'intérrieur de l'imput

voilà la capture
coment on peut mettre l'incon sur l'impt a droite car googlechrome c'est bon et pas sur firefox

voilà le code

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
			    <div class="conexionhaut"><label for="username">Nom d'utilisateur :</label>
 
				<div class="inputglob">
 
				<span class="icon-connexionutilisateur" title=" utilisateur"></span>
 
				<input placeholder="Enter Username" id="username">
 
				</div>
				</div>
 
			    <div class="conexionhaut"><label for="password" title="mot de passe">Mot de Passe :</label>
 
				<div class="inputglob">
 
				<span class="icon-connexionmotpasse"></span>
 
				<input type="password" placeholder="Enter Password" id="password">
 
				</div>
 
				<div class="inputglob">
				<span onclick="toto()" class="icon-masquerdemasquermdp" title="Masquer et démasquer le mdp"></span>
 
				</div>
				</div>

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
      .conexionhaut
	  {
	  border-color:#CCCCCC; /* on affiche la couleur de la bordure */
  	  border-style: solid; /*  on affiche le style de l'a bordure */
	  border-width:0px 0px 0px 0px; /* top right bottom left */
	  margin:0px 0px 0px 0px;/* top right bottom left */
	  padding:10px 10px 10px 10px;/* top right bottom left */
	  overflow:hidden;
	  min-height:40px;
	  }
 
.icon-connexionutilisateur:before, .icon-connexionmotpasse:before
{
position: absolute;
top:0;
left:245px;
}	  
	  .icon-masquerdemasquermdp:before
	  {
	  content: "\f06e";
position: absolute;
top:-15px;
right:240px;
	  }
	  .icon-connexionutilisateur:before
	  {
	  content: "\f007";
	  }
 
	  .icon-connexionmotpasse:before
	  {
	  content: "\f023";
	  }
 
	  .inputglob
	  {
	  position: relative;
	  }
 
	  .inputglob input
	  {
	  background-color:#FFFFFF; /* Couleur de fond */
	  min-height:20px;
	  border-color:#CCCCCC; /* on affiche la couleur de la bordure */
  	  border-style: solid; /*  on affiche le style de l'a bordure */
	  border-width:1px 1px 1px 1px; /* top right bottom left */
	  margin:-5px 0px 0px 0px;/* top right bottom left */
	  padding:0px 0px 0px 40px;/* top right bottom left */
	  }

coment je dois mettre mon iconnomon champmasquer a l'interrieur de l'imput a droite

Bonjour,

Citation:

Envoyé par leroilion94

bonjours, j'essaie de mettre un icon-connexionutilisateur a l'interrieur de l'imput a droite

+

Citation:

Envoyé par leroilion94

coment je dois mettre mon iconnomon champmasquer a l'interrieur de l'imput a droite

=

Citation:

Envoyé par leroilion94

???

Malgré l'orthographe et grâce au screenshot, j'en déduis donc que tu souhaites mettre l'icône du petit oeil à droite et à l'intérieur de ton input..

Code:

right:240px;

en remplaçant 240px par 63% j'ai bien le résultat attendu sur firefox + chrome.

bonjour,
Code:

1 2 3 4 5 .inputglob { position: relative; display:inline-block; }
Ne reste plus qu'à régler les left:5px; ou right:5px; des icônes.

merci, c'est bon

Il serait aimable de ta part de MONTRER ton code corrigé.

Ça peut en intéresser d'autres.

Citation:

Envoyé par leroilion94

merci, c'est bon

oki, qu'as tu fait finalement ?

Pour le fun : http://codepen.io/anon/pen/medNGG sans positionement en absolute ;)