web-dev-qa-db-fra.com

Comment changer la couleur de l'espace réservé d'un champ de saisie spécifique?

Je veux changer la couleur de l'espace réservé spécifique. J'utilise de nombreux champs de saisie pour mon projet, le problème est que dans certaines sections j'ai besoin d'une couleur grise pour l'espace réservé et dans certaines sections j'ai besoin d'une couleur blanche pour l'espace réservé. J'ai cherché à cet effet et trouver cette solution.

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}

Mais ce code est implémenté sur tous les espaces réservés d'entrée, et je n'ai pas besoin de tous les espaces réservés d'entrée de la même couleur. Alors, quelqu'un peut-il m'aider. Merci d'avance.

htmlcssinputplaceholder
11
Ayaz Shah

Vous devez attribuer le -input-placeholder à certains classname et ajoutez cette classe à n'importe quel input vous avez besoin de son espace réservé pour l'avoir, comme ceci JS Fiddle 

.change::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    color: #909;
}
.change:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #909;
    opacity: 1;
}
.change::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #909;
    opacity: 1;
}
.change:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #909;
}
input[type="text"]{
    display:block;
    width:300px;
    padding:5px;
    margin-bottom:5px;
    font-size:1.5em;
}
<input type="text" placeholder="text1" class="change">
<input type="text" placeholder="text2">
<input type="text" placeholder="text3">
<input type="text" placeholder="text4"  class="change">
<input type="text" placeholder="text5">
24
Mi-Creativity

Vous pouvez également utiliser une solution Javascript sans espace réservé pour faire ce que vous voulez faire. Voici le code:

//This fix allows you to change the color to whatever textcolor is while also making text go away when you click on it. However, this fix does not put the temporary placeholder back into the textarea when there is no text inside the input.
<input type="text" id="usr" value="Username" onclick="this.value = '';" style="color: red;"/>
<input type="text" id="pwd" value="Password" onclick="this.value = ''; this.type = 'password';" style="color: green;"/>

Veuillez noter que ce correctif est un espace réservé temporaire et ne doit pas être utilisé pour les formulaires de connexion réels. Je suggère d'utiliser ce que @Ayaz_Shah a recommandé dans sa réponse.

1
Cannicide
 input::-moz-placeholder {
    color: white;
  }
  input:-moz-placeholder {
    color: white;
    font-size: 14px !important;
  }
  *::-webkit-input-placeholder {
    color: white;
    font-size: 14px !important;
  }
  *:-ms-input-placeholder {
    color: white;
    font-size: 14px !important;
  }
  *:-moz-placeholder {
    color: white;
    font-size: 14px !important;
  }
0
Supriya