Bootstrap Placeholder Renk Değiştirme
Bildiğiniz üzere HTML5 ile Bootstrap iletişim formlarını kullandığımızda varsayılan yertutucu rengini kullanmak zorunda kalırız. Ama bu varsayılan renk bazı durumlarda tasarımımız ile uyuşmayacağı için bootstrap form elementinde placeholder renk değiştirme gerekecektir. Yandaki imajda görüldüğü gibi.
Rengi değiştirmek için CSS’imize aşağıdaki gibi bir kod girmeyi deneriz.
color:#000; Fakat sonuç olumsuz. 🙂 Bu şekilde placeholder (yertutucu) rengi değişmeyecektir. Yukarıda girdiğimiz komut aslında form alanına yazdığımız yazının rengini değiştirecektir.
Bunun yanı sıra aşağıda farklı tarayıcılar için verişmiş CSS kodlarını CSS dosyanıza uyguladığınızda yertutucunun renklerinin değiştiğini göreceksiniz.
*Placeholder Colors*/
.form-control::-webkit-input-placeholder {
color:#000;
}
.form-control:-moz-placeholder { /* Firefox 18- */
color:#000;
}
.form-control::-moz-placeholder { /* Firefox 19+ */
color:#000;
}
.form-control:-ms-input-placeholder {
color:#000;
} Yukarıda da gördüğünüz gibi; Bootstrap’ın içinde yer alan .form-control classını her browser ve browser ailesi için placeholder rengini düzenliyoruz.
Tabi biz bu yazımızda sadece placeholder rengini değiştirmekten bahsettik. Placeholder için color: ile birlikte font-family: text-decoration: vb gibi yazı özelliklerini değiştirebileceğinizi de unutmayın.
Faydalı olabilmiş olmak dileğiyle 🙂 İyi günler.