Belirli giriş alanının yer tutucu rengi nasıl değiştirilir?

Question

Belirli yer tutucuların rengini değiştirmek istiyorum. Projem için birçok girdi alanı kullanıyorum, sorun şu ki, bazı bölümlerde yer tutucu için gri renge ihtiyacım var ve bazı bölümlerde yer tutucu için beyaz renge ihtiyacım var. Bu amaçla aradım ve bu çözümü buldum.

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

Ancak bu kod tüm giriş yer tutucularında uygulanır ve tüm giriş yer tutucularına aynı renkte ihtiyacım yoktur. Herkes bana yardım edebilir. Şimdiden teşekkürler.

Answer 1

Bazı classname için -input-placeholder atamak ve sadece Ayrıca kullanabilirsiniz bu 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

gibi, onun tutucu bu olması gerekir herhangi input için o sınıfı eklemem gerekiyor Ne yapmak istediğinizi yapmak için yer tutucu olmadan Javascript çözümü. İşte kod: Bu düzeltme geçici tutucudur ve gerçek giriş formları için kullanılmamalıdır

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

Lütfen değil. Cevabında @Ayaz_Shah tarafından önerilen şeyi kullanmanızı öneririm.