CSS İle Input'daki Placeholder'in Rengini Değiştirmek - Sinan Yorulmaz

Sinan Yorulmaz


Bir Yazılımcının Günlüğü

23 Eylül 2015
CSS İle Input’daki Placeholder’in Rengini Değiştirmek

CSS3
23 Eylül 2015 CSS/CSS3 968 Okuma Yorum Yok

Özellikle koyu renklerde bir tasarım yapıyorsanız, kullanacağınız Input‘lardaki “Placeholder” etiketi sizin için sorun olacaktır. Çünkü  Placeholder’a bir değer girdiğiniz zaman çıktı olarak gri tonda bir yazı görürsünüz. Koyu renkli tasarımlarda veya koyu renkli Input’larda bu çok hoş gözükmeyecektir. Siz her ne kadar Class/ID verip rengini değiştirmeye çalışsanız da bu sadece o Input’un içerisine yazılan yazının rengini değiştirecektir.

Peki Placeholder’in rengini nasıl değiştirebiliriz?

Bu işlemi basit bir kaç satır CSS kodu ile halledeceğiz. Öncelikle şöyle bir Form çıktısına sahip olun; sonucu gözlemleyebilmek için, varsa zaten sorun yok.

Bu çıktı sonucunda oluşturduğunuz Input’da “Aradığınız kelime?” yazısını göreceksiniz ve koyu renkte bir yazı olacak. Şimdi ben .search-box{color:#FFF;} şeklinde bir CSS satırı oluştursam bu sadece Input’a yazacağınız yazının rengini değiştirir. Placeholder rengi aynı kalır. Şimdi stil dosyanıza şu CSS satırlarını ekleyin:

Böylece Placeholder içerisindeki yazınız beyaz renk olacaktır. Bu kodlar aracılığı ile sadece renk değil, her türlü CSS özelliğini verebilirsiniz Placeholder’a.

Yorum Yap

Copyright © 2015. Tüm haklarım anneme aittir. Babama yakalanmadığınız sürece sorun yok!