28172 sujets

CSS et mise en forme, CSS3

Icône formulaire de connexion

Bonjour
Je fais actuellement un formulaire de connexion sur smartphone.
Dans mon input j'aimerai intégrer une image ( enveloppe) pour l'envoi de mail sauf que comme je m'y attendais un petit peu lorsqu'on écris cela commence à s'écrire sur l'enveloppe .
Comment faire pour que l'enveloppe disparaisse lorsqu'on commence à écrire ?
Je ne sais pas si avec CSS c'est possible .

Je vous joins mon code 

 
<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>Servialux</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="style.css" media="screen">
  </head>
<body>
  <div class="corps">
    <h1> Connexion </h1>
    <form>
      <fieldset class="mail">
        <input type="email" class="email">
      </fieldset> 
      
      <fieldset class="mdp">
        <input type="password" class="password">
      </fieldset>
      
      <input type="submit" name="envoi" value="Connexion">
    </form>
     <p class="centre"> <a class="oubli" href="#"> Mot de passe oublié ? </a> </p>

     <ul class="social_icons">
        <li><a href="#" id="fb"> <img src="facebook.png" alt=""></a></li>
        <li><a href="#" id="tw"> <img src="twitter.png" alt=""></a></li>
        <li><a href="#" id="ld"> <img src="linkedin.png" alt=""></a></li>
    </ul>
  </div>                                                                                                                                       
</body>
</html> 
    




body{
	height: 100vh;
	background:#568EBF;
}


h1{
	
	font-family: 'OstrichSansBlack';
	font-size:35px;
	color:#fff;
	border-bottom:1px solid #fff; /* Barre blanche */
	text-shadow:1px 1px 2px #185477;
	line-height:2;
	padding:5px 0 0px 0px;
	text-align:center;
	margin: 3px;
}

input[type=email]{
	width:80%;
	height:32px;
	border: solid #67ABE5;
	margin:auto;
	background: url(enveloppe.gif) no-repeat #67ABE5 left ;
	margin-top: 60px;
	margin-left: 30px;
	color:white;

}

input[type=password]{
	width:80%;
	height:32px;
	border: solid #67ABE5;
	margin:auto;
	background:#67ABE5 ;
	margin-top: 10px;
	margin-left: 30px;
	color:white;

}

input[type=submit]{
	
	font:italic 20px 'OstrichSansBlack';
	background:#67ABE5;
	color:#fff;
	font-size: 30px;
	border-radius:2px;
	width:200px;
	height: 40px;
	border:1px solid #67ABE5 ;
	box-shadow:1px 1px 3px #67ABE5;
	margin-left:75px;
	margin-top: 30px;
	
	

}
fieldset{
	border:none;
}

.centre{
	text-align: center;
}
.oubli{
	text-align: center;
	text-decoration: none;
	color:white;
	font-style: 'OstrichSansBlack';
}
.social_icons {
	margin:0 auto;
	margin-top:50px;
	border-radius:2em;
	line-height:45px;
	height:45px;
	width:142px;
	
}

.social_icons li {
	display:inline;
	padding:0px !important;
	margin:0px;
}

.social_icons li img {
	border:0px !important;
}
Zelena merci c'est exactement ce dont j'avais besoin .
Par contre comment faire pour que ma couleur de fond reste quand même ? car la sa devient blanc
voici ce que j'ai modifié

input{	
	width:80%;
	height:32px;
	border: solid #67ABE5;
	margin:auto;
	margin-top: 60px;
	margin-left: 30px;
	color:white;
}
input[type=email]:not(:focus){
	background: url(enveloppe.gif) no-repeat #67ABE5 left ;
}
Pour la couleur de fond, il faut qu'elle soit présente dans l'input par défaut. (input {...})

Mais je suis désolée, je pense vous avoir dit une bêtise : quand l'input pour l'e-mail perd le focus, l'image ne revient-elle pas ? Smiley sweatdrop

Et là, sans Javascript, je ne vois pas...
Smiley confus
Modérateur
Salut !

Pour ma part je te propose une solution en combinant une font-icon (si tu en as une) et l'attribut placeholder des inputs.

En gros tu passe le code hexa du caractère de la font-icon et en css tu change juste la font du placeholder pour celui de la font-icon.

J'ai pas testé sur une appli en prod ni sur plusieur navigateur mais ma démo fonctionne plutôt bien sous chrome : http://jsfiddle.net/Undless/yvaucm93/2/

Tiré de ce post : http://stackoverflow.com/questions/19350291/use-font-awesome-icon-in-placeholder mais j'ai viré la partie Js


bisous
Sujet clos
Aller à