HTML5 placeholder renk değiştirme

HTML5'in en kullanışlı kodlarından bir tanesi de "placeholder" komutu oldu şüphesiz. Bu komut sayesinde bir textbox (input) içine yazdığımız açıklamanın, ilgili alan tıklandığında kaybolması işlemini tek bir kelime ile yapabiliyoruz. Önceden bu iş için uzunca bir java kodu yazıyorduk. Artık buna gerek kalmadı. Şimdi bunun nasıl yapıldığına ve renk değişimine bakalım...

<input type="text" placeholder="Adınız ve Soyadınız" />
<textarea placeholder="Kısa bir açıklama yazınız"></textarea>


Bu attr’yi kullandığımızda verdiğimiz, renk değerini ne verirsel verelim opacity değerini düşürüyor bunu engellemek için aşağıdaki tanımlamayı yapmamız gerekiyor.

:-moz-placeholder { /* Firefox 4 - 18 arası */

   opacity:1;

}

::-moz-placeholder { /* Firefox 19+ */

   opacity:1;

}

:-ms-input-placeholder { /* Internet Explorer 10+ */

   opacity:1;

}

::-webkit-input-placeholder { /* WebKit browsers */

    opacity:1;

    color: #000;

}

Örnek placeholder uygulaması