Changer la couleur d'un placeholder

Question

Tatiana06

24 May 2016 à 11:44

Bonjour
J'ai un petit soucis
J'ai un formulaire de connexion et je souhaiterais changer la couleur de mon icône fontawesome enveloppe en blanc
Seulement je ne sais absolument pas comment faire j'ai essayé plusieurs choses mais rien ne marche ...

Voici 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" placeholder="&#xf003;" style="font-family:Arial, FontAwesome" />
      </fieldset> 
      
      <fieldset class="mdp">
        <input type="password" class="password" placeholder="Mot de passe">
      </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;
}
@font-face {
	font-family: 'FontAwesome';
	src: url('fonts/fontawesome-webfont.eot');
	src: url('fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),  url('fonts/fontawesome-webfont.woff') format('woff'),  url('fonts/fontawesome-webfont.ttf') format('truetype'),  url('fonts/fontawesome-webfont.svg#OstrichSansCondensedLight') format('svg');
	font-weight: normal;
	font-style: normal;
}

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;
}

h1.inter{
	font-family: 'OstrichSansBlack';
	font-size:32px;
	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;
}
/****************************************************************************************************************
************************************************ Page de connexion **********************************************
*****************************************************************************************************************/

input[type=email]{

	background: #67ABE5 left ;	width:80%;
	height:32px;
	border: solid #67ABE5;
	margin:auto;
	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';
}

Greg_Lumiere

Modérateur

24 May 2016 à 11:53

Bonjour,

Tu ne pourras pas personnaliser tes placeholder de façon indépendante par rapport à ton Input.

En effet, l'attribut placeholder hérite des propriétés de sa balise, soit Input.

En somme, le style appliqué sur un Placeholder dépend du style appliqué sur son Input et restent identiques.

A toi après de composer tes scénarios par exemple suivant l’interaction de l'utilisateur (effet survolé, champs rempli, saisi correcte/incorrecte etc).

Après il peut exister des possibilités uniques (valable dans un contexte particulier). Chrome a peut-être prévu ceci avec une extension propriétaire. Il est peut-être possible d'agir via JS mais cette méthode ne me semble pas orthodoxe.

Bonne journée.

Tatiana06

24 May 2016 à 12:02

Ok merci de ta réponse mais la pour le coup je ne vois vraiment pas comment faire pour changer ceci et vraiment j'ai essayé pleins de choses qui ne fonctionnent pas je commence à être désespérée Smiley decu

Zelena

24 May 2016 à 12:06

Je n'ai pas essayé mais cela peut peut-être marcher...

https://css-tricks.com/snippets/css/style-placeholder-text/

Smiley smile

Tatiana06

24 May 2016 à 12:10

merci Zelena mais je viens d'essayer et sa ne marche pas non plus ...

Zelena

24 May 2016 à 12:30

Curieux... ça marche sur mon ordinateur de bureau et avec Firefox...
Smiley confus

Greg_Lumiere

Modérateur

24 May 2016 à 13:10

Re-coucou,

La seule façon fiable que j'ai trouvé est de passer par le sélecteur d'attribut.

[placeholder] {
  font-style: italic;
  opacity: .9;
}

Sinon avec les préfixes propriétaires, l'inconvénient est qu'il faille une ligne = 1 préfixe. On ne peut pas regrouper les instructions. Du coup pour la maintenance c'est la misère (si tu changes une propriétés sur l'extension webkit, tu dois répercuter cette même modif. pour chaque instruction placeholder).

Pour reprendre l'exemple cité par Zelena, il faut vraiment respecter cette organisation

::-webkit-input-placeholder {
   color: red;
}

:-moz-placeholder { /* Firefox 18- */
   color: red;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: red;  
}

:-ms-input-placeholder {  
   color: red;  
}

et non pas

::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {  
   color: red;  
}

Edit: J'avais oublié cet article Smiley confused

Zelena a écrit :
Je n'ai pas essayé mais cela peut peut-être marcher...
https://css-tricks.com/snippets/css/style-placeholder-text/

Modifié par Greg_Lumiere (24 May 2016 - 13:11)

Tatiana06

24 May 2016 à 14:23

Merci beaucoup pour votre aide à tout les deux , j'ai effectivement réussi Smiley smile

Olivier C

24 May 2016 à 18:03

Greg_Lumiere a écrit :
Sinon avec les préfixes propriétaires, l'inconvénient est qu'il faille une ligne = 1 préfixe. On ne peut pas regrouper les instructions. Du coup pour la maintenance c'est la misère (si tu changes une propriétés sur l'extension webkit, tu dois répercuter cette même modif. pour chaque instruction placeholder).

C'est la raison pour laquelle il faut toujours utiliser Autoprefixer dans son workflow en intégration.

Donc, chez moi, ce code (Stylus, mais ça aurait tout aussi bien pus être Sass, ou même du Css vanilla) :

  ::placeholder
    color $colorCL121

Donnera :

::-webkit-input-placeholder {
  color: #aaa;
}
::-moz-placeholder {
  color: #aaa;
}
:-ms-input-placeholder {
  color: #aaa;
}
::placeholder {
  color: #aaa;
}

Un exemple de placeholder en prod' : Input.

Sujet clos

CSS et mise en forme, CSS3

Changer la couleur d'un placeholder