Css ile Yer Tutucuya Nasıl Stil Verebilirim?

Css ile Yer Tutucuya Nasıl Stil Verebilirim?

Formların input veya textarea alanlarında bilgileri gösterdiğimiz kısma Yer Tutucu (Placeholder) denir. Chrome’un öncülüğünde kullanıcı bir şeyler yazdıktan sonra kaybolmaktadır :) Eskiden bu işlemi javascript ile yaparken artık HTML5 ile placeholder'a stil verebiliyoruz.

Klasik olarak yer tutucularında en büyük sorunu İE 10 da desteklenip 8 ve 9 da desteklenmemesidir.

Örnek HTML :

<input type="text" name="arama" placeholder="Aramak İstediğiniz İçerik?" />

Stillerede örnek css gibi bir css yazarak müdahale edebilirsiniz.

• input{
• color:#333;
• width:150px;
• padding:3px 0 0 15px;
• border-radius:3px;
• border:1px solid #ccc;
• }
•  
• input::-webkit-input-placeholder { color:#1633c7}
• input:-moz-placeholder { color:#1633c7 }
• input:-ms-input-placeholder { color:#1633c7 }

Not : -webkit tanımının başında iki adet iki nokta üst üste konulması gerekiyor.