2015-11-23 12 views
5

Ich möchte die Farbe eines bestimmten Platzhalters ändern. Ich benutze viele Eingabefelder für mein Projekt, Problem ist, dass ich in einigen Abschnitt graue Farbe für Platzhalter brauche und in einigen Abschnitt brauche ich weiße Farbe für Platzhalter. Ich habe nach diesem Zweck gesucht und diese Lösung gefunden.Wie ändert man die Platzhalterfarbe eines bestimmten Eingabefeldes?

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

Aber dieser Code ist implementieren für alle Eingabe Platzhalter, und ich brauche nicht alle Eingabe Platzhalter in der gleichen Farbe. Kann mir bitte jemand helfen? Danke im Voraus.

Antwort

11

Sie müssen die -input-placeholder einige classname und fügen diese Klasse zu jedem input Sie müssen ihren Platzhalter zuweisen, dieses zu haben, wie diese 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">

+0

Achten Sie darauf, die Farbe in Ihrer benutzerdefinierten Klasse nicht festzulegen. Ich tat dies und meine benutzerdefinierte Klassenfarbe überschrieb die Pseudo-Eingabe-Platzhalterfarbe in FF (und IE, glaube ich). – kenecaswell

+0

Arbeitete perfekt. Danke –

0

Sie auch nutzen könnten Javascript-Lösung ohne Platzhalter zu tun, was Sie tun möchten. Hier ist der 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;"/>

Bitte nicht, dass dieses Update eine temporäre Platzhalter und soll nicht für die tatsächlichen Login-Formulare verwendet werden. Ich würde vorschlagen, das zu verwenden, was @Ayaz_Shah in seiner Antwort empfohlen hat.

Verwandte Themen