Span dans input

Input

arthur -
arthur - 15 janv. 2017 à 12:37

Bonjour,

je voudrais avoir votre avis le plus simple

1 er code

						 <div class="global-input">
	      <span class="icon-connexion-utilisateur" title="connexion utilisateur"></span>
		  
		  <input class="" type="text" placeholder="Enter Username" id="username" name="username" />
		  
		  </div>

ou bien ce code

	      <span class="icon-connexion" title="connexion"></span>
		  
		  <input class="global-input" type="text" placeholder="Enter Username" id="username" name="username" />

dans le css il y aura une position:relative; ou absolute

résultat

afin que le span soit à côté de l'imput

comme ce site

http://www.oulfa.fr/signup.php

merci

Afficher la suite

A voir également:

Span input
Input signal out of range ✓ - Forum Matériel & Système
Comment désactiver out of range - Forum Ecran
No video input ✓ - Forum Matériel & Système
No video input enter sleep mode ✓ - Forum Matériel & Système
Input signal not found ✓ - Forum Matériel & Système

4 réponses

Réponse 1 / 4

EclairOChocola Messages postés 450 Date d'inscription Statut Membre Dernière intervention 91

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.

arthur

laisse tombé merci de ta réponse ;)

Réponse 2 / 4

arthur

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

Utilisateur anonyme

Alors pour info l'input ne supporte pas les pseudo-éléments before et after, donc tes class icon-machin ne fonctionnent pas, il faut les appliquer sur le label.

Sinon ici tu as une solution:

https://stackoverflow.com/questions/19285640/font-awesome-icon-inside-text-input-element#answer-19291132

Et l'exemple que tu proposes, si t'avais analysé leur code t'aurais vu que c'était un background-image appliqué sur l'input, il n'y a pas de span devant.

J'espère que c'est un bon champagne.

arthur

merci , je vais l'appliqué sur les label ,

je t'en remercie pour ton aide ;)

Réponse 3 / 4

arthur

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

Discussions similaires

comment désactiver out of range

Resolution d'ecran "Input not supported"

configuration de switch

Je débute:"commande n=int(input())

int(input())

Probleme au demarrage de windows (Input not supported)

Votre réponse

Discussions similaires