Come modificare il colore del segnaposto per il campo di input specifico?

Question

Voglio cambiare il colore del segnaposto specifico. Sto usando molti campi di input per il mio progetto, il problema è che in alcune sezioni ho bisogno del colore grigio per il segnaposto e in alcune sezioni ho bisogno del colore bianco per il segnaposto. Ho cercato questo scopo e ho trovato questa soluzione.

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

Ma questo codice è implementare su tutti i segnaposto di input, e non ho bisogno di tutti i segnaposto di ingresso in tinta. Quindi qualcuno può aiutarmi per favore. Grazie in anticipo.

Answer 1

è necessario assegnare il -input-placeholder ad alcuni classname e aggiungere quella classe a qualsiasi input è necessario il suo segnaposto di avere questo, proprio come questo 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">

Answer 2

Si potrebbe anche usare un Soluzione Javascript senza segnaposto per fare ciò che vuoi fare. Ecco il codice:

//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;"/>

prega di non che questa correzione è un segnaposto temporaneo e non deve essere utilizzato per moduli di login attuali. Suggerirei di usare ciò che @Ayaz_Shah ha raccomandato nella sua risposta.