HTML5 için input placeholder rengini CSS ile değiştirme

Chrome, input[type=text] öğeleri için yer tutucu özelliğini (placeholder) destekler – muhtemelen diğer tarayıcılar için de bu geçerli.

Ancak aşağıdaki CSS yer tutucunun değerinde bir değişiklik yapmıyor. Yani Value yazısı kırmızı yerine gri olarak kalıyor.

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

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

Peki yer tutucu metnin rengini nasıl değiştireceğiz?

Uygulama

Placeholder için üç farklı uygulama bulunur: sahte-öğeler, sahte-sınıflar ve “hiçbir şey”ler.

• WebKit, Blink (Safari, Google Chrome, Opera 15+) ve Microsoft Edge sahte-öğe kullanır: . ^[Ref]::-webkit-input-placeholder
• Mozilla Firefox 4 ila 18 sahte-sınıf kullanır:(tek iki-nokta-üst -üste). ^[Ref]:-moz-placeholder
• Mozilla Firefox 19+ sahte-öğe kullanır: ^[Ref]::-moz-placeholder
• Internet Explorer 10 ve 11 sahte-sınıf kullanır: . ^[Ref]:-ms-input-placeholder
• Nisan 2017: Çoğu modern tarayıcı basit sahte-öğeyi destekler::placeholder ^[Ref]

Internet Explorer 9 ve önceki sürümleri özniteliği hiç desteklemezken, Opera 12 ve önceki sürümleri yer tutucular için herhangi bir CSS seçiciyi desteklemez.

En iyi uygulamanın ne olduğu hakkındaki tartışma hala devam ediyor. Sahte-öğelerin Gölge DOM‘da gerçek öğeler gibi davrandığını unutmayın.

CSS seçicileri

Her tarayıcı için ayrı kurallara ihtiyacımız var. Aksi takdirde tüm grup tüm tarayıcılar tarafından yoksayılır.

::-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;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #909;
}

::placeholder { /* Çoğu modern tarayıcılar artık bunu destekliyor */
   color:    #909;
}

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

Kullanım notları

• Kötü kontrastlardan kaçınmaya dikkat edin. Firefox’un yer tutucusu varsayılan olarak daha düşük bir opaklık kullanıyor gibi görünüyor. Bu yüzden burada opacity: 1 kullanmanız gerekiyor.
• Yer tutucu metninin sığmazsa kesildiğini unutmayın – giriş öğelerinizi boyutlandırın ve büyük minimum yazı tipi boyutu ayarlarıyla test edin. Çevirileri unutmayın: Bazı dillerin aynı kelime için daha fazla alana ihtiyacı vardır. 
• placeholder için HTML desteğine sahip ancak CSS desteği olmayan tarayıcılar da (Opera gibi) test edilmelidir.

Metin alanlarında (textarea) placeholder kullanımı

Metin alanlarına da stil getirebilirsiniz:

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #636363;
}
input:-moz-placeholder, textarea:-moz-placeholder {
  color: #636363;
}