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.

İlişkili olduğu konular : browser, css, html, html input, placeholder

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;
}
Bu yazı topluluk tarafından oluşturuldu. Lisans bilgisine bakabilirsiniz. Yanlış veya eksik bilgileri düzenlemek için github üzerinden katkıda bulunabilirsiniz.

Kategoriler: Yazı, CSS

Okumaya devam et!

CSS’nizi düzenleme

Daha büyük stil sayfaları ve büyük projeler üzerinde çalışmaya başladığınızda, büyük bir CSS dosyasını korumanın zor olabileceğini keşfedeceksiniz.

div ile tüm alanı doldurma

İçeriğin tüm ekranı kaplamasını istediğim bir web uygulaması yapmak istediğimizi varsayalım.

Tür, sınıf ve kimlik seçicileri

Bu makalede muhtemelen en sık kullanacağınız en basit seçicilerden bazılarını inceleyeceğiz.

CSS’de öğeleri boyutlandırma

Şimdiye kadarki yazılarda CSS kullanarak bir web sayfasındaki öğeleri boyutlandırmanın çeşitli yollarıyla karşılaştınız.

Yorum Gönderin

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

koddla
Tema Mundana by WowThemes.net.