Span dans input

question piège ;)

ca marche sauf pour un

donc j'ai mis

	  <p><label class="label-conexion icon-utilisateur" for="username">nom d'utilisateur :</label><input class="global-input" type="text" placeholder="Enter Username" id="username" name="username" /></p>
	  <p><label class="label-conexion icon-mot-de-passe" for="password" title="mot de passe">mot de pass :</label><input class="global-input " type="password" placeholder="Enter Password" id="password" /></p>

avec

      .icon-utilisateur:before, .icon-mot-de-passe:before
	  {
	  position:relative;
	  left:11.5em;
	  top:0.8em;
	  }
      .icon-utilisateur:before
	  {
	  content: "\e900";
	  }
	  
	  .icon-mot-de-passe:before
	  {
	  content: "\e98d";
	  }

donc là mes 2 icon sont bien à gauche malgré avec un 11.5em

mais mon souci quand je met

	  <p><label class="label-conexion icon-utilisateur" for="username">nom d'utilisateur :</label><input class="global-input" type="text" placeholder="Enter Username" id="username" name="username" /></p>
	  <p><label class="label-conexion icon-mot-de-passe icon-masquer-demasquer-mdp" for="password" title="mot de passe">mot de pass :</label><!--<span class=""></span>--><input class="global-input " type="password" placeholder="Enter Password" id="password" /><!--<span onclick="toto()" class=""></span>--></p>

donc j'ai juste rajouter icon-masquer-demasquer-mdp qui devrait être à droite de l'input

on le voit pas car je pense qu'il est passé en dessous de .icon-mot-de-passe

malgre que j'ai changer left par right

      .icon-utilisateur:before, .icon-mot-de-passe:before
	  {
	  position:relative;
	  left:11.5em;
	  top:0.8em;
	  }
      .icon-utilisateur:before
	  {
	  content: "\e900";
	  }
	  
	  .icon-mot-de-passe:before
	  {
	  content: "\e98d";
	  }
	  
	  .icon-masquer-demasquer-mdp:before
	  {
	  content: "\e909";
	  position:relative;
	  right:11.5em;
	  top:0.8em;
	  }

merci

je suis gentil je te done une chance pour m'expliquer

j'ai mis ça au départ l'icone on les voient

	  <p><label class="label-conexion" for="username">nom d'utilisateur :</label><span class="icon-utilisateur"></span><input class="global-input" type="text" placeholder="Enter Username" id="username" name="username" /></p>
	  <p><label class="label-conexion" for="password" title="mot de passe">mot de pass :</label><span class="icon-mot-de-passe"></span><input class="global-input " type="password" placeholder="Enter Password" id="password" /><span onclick="toto()" class="icon-masquer-demasquer-mdp"></span></p>

toi tu ne veux pas que j'affiche les span

ok pas de souci

donc

	  <p><label class="label-conexion" for="username">nom d'utilisateur :</label><input class="global-input icon-utilisateur" type="text" placeholder="Enter Username" id="username" name="username" /></p>
	  <p><label class="label-conexion" for="password" title="mot de passe">mot de pass :</label><input onclick="toto()" class="global-input icon-mot-de-passe icon-masquer-demasquer-mdp" type="password" placeholder="Enter Password" id="password" /></p>

mais là on ne les voient plus

et css

	  .global-input
	  {
	  position:relative;
/*	  max-width:16em;
	  padding:0.5em;
	  padding-left:3em;
	  border:#CCCCCC 1px solid;*/
	  }
	  
	  input[type=text], input[type=password] 
	  {
	  padding:0.5em;
	  padding-left:3em;
	  width:20em;
	  }
      .icon-utilisateur:before, .icon-mot-de-passe:before
	  {
	  position:relative;
	  left:1.5em;
	  }
      .icon-utilisateur:before
	  {
	  content: "\e900";
	  }
	  
	  .icon-mot-de-passe:before
	  {
	  content: "\e98d";
	  }
	  
	  .icon-masquer-demasquer-mdp:before
	  {
	  position:relative;
	  content: "\e909";
	  right:2em;
	  }

si tu peux m'expliquer come on affiche les ico sans les span ;)

je te pay une coupe de champagne ;)

merci

Bonsoir ! Sache que normalement ce ne sont pas des span à coté des input mais des label. La mise en forme est plus simple et c'est plus propre d'utilisé les éléments adéquats.