Kategoriler
CSS

CSS İle Input’daki Placeholder’in Rengini Değiştirmek

Ö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.

[html]<form id=”search” class=”form” action=”” autocomplete=”off” method=”get”><input class=”search-box” name=”search” type=”text” placeholder=”Aradığınız kelime?” /></form>[/html]

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:

[html].form::-webkit-input-placeholder {color:#FFF;} /* Google Chrome, Opera */
.form:-ms-input-placeholder{color:#FFF;} /* Internet Explorer */
.form::-moz-placeholder{color:#FFF;} /* Mozilla Firefox 19+ */
.form:-moz-placeholder{color:#FFF;} /* Mozilla Firefox 18- */[/html]

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.

Bir cevap yazın

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.