Krom input[type=text] elementler (Diğerleri muhtemelen de öyle) placeholder attribute destekler.

Ama aşağıdaki CSS zerre kadar yer tutucunun değeri için squat yapmaz:

input[placeholder], [placeholder], *[placeholder] {
    color: red !important;
}

<input type="text" placeholder="Value">

Value hala kırmızı yerine gri kalır.

Bir şekilde yer tutucu metnin rengini değiştirmek için var mı?

Zaten tutucu desteklemeyen tarayıcılar özgün öznitelik için yer tutucu jQuery eklentisi kullanıyorum.

Uygulama

Üç farklı uygulama vardır: sözde elemanlar, pseudo-sınıfları ve hiçbir şey.

• Y, Blink (Safari, Google Chrome, Opera 15 ) ve Microsoft Kenar pseudo-element kullanıyor: ::-webkit-input-placeholder.
• Mozilla Firefox 4 için 18 pseudo-class kullanıyor: :-moz-placeholder (birkolon).
• Mozilla Firefox 19 pseudo-element kullanıyor: ::-moz-placeholder ama eski seçici hala bir süre için çalışacak.
• Internet Explorer 10 ve 11 pseudo-sınıfı kullanıyorsunuz: :-ms-input-placeholder.

Internet Explorer 9 ve daha düşük placeholder nitelik, Opera 12 iken desteklemiyor ve alt tutucular için herhangi bir CSS seçici desteklemez.

En iyi uygulama şekli hakkında tartışma hala devam ediyor. Shadow DOM gerçek unsurlar gibi pseudo-elements hareket unutmayın. input padding sahte bir öğe olarak aynı arka plan rengini alacak.

CSS seçiciler

Kullanıcı arayüzleri bilinmeyen bir seçici bir kuralı göz ardı etmeleri gerekmektedir. Selectors Level 3 bkz

seçiciler geçersiz bir seçici içeren group geçersiz.

Her tarayıcı için ayrı kurallara ihtiyacımız var. Aksi halde tüm grup tüm tarayıcılar tarafından dikkate alınmaz.

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

<input placeholder="Stack Snippets are awesome!">

Kullanım notları

• Kötü karşıtlıkları önlemek için dikkatli olun. Firefox'un tutucu düşük bir donukluk varsaymak gibi görünüyor, bu yüzden opacity: 1 burada kullanmak gerekiyor.
• Yer tutucu metin sadece eğer – giriş em öğeleri sığacak şekilde ve büyük minimum yazı tipi boyutu ayarları ile onları test değil mi kesiliyor unutmayın. Çeviriler unutma: bazı dillerde aynı sözcük için need more room.
• Bunun için CSS desteği olmadan placeholder HTML desteği ile ama tarayıcılar (Opera gibi) de test edilmelidir.
• Bazı tarayıcılar input bazı türleri (, *email*19)ek varsayılan CSS kullanın. Bu beklenmedik bir şekilde işleme etkileyebilir. properties -webkit-appearance ve -moz-appearance bunu değiştirmek için kullanın. Örnek:

    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }