HTML5 placeholder renk değiştirme

15-01-2015, 12:52:22

#1

AycanB

Kimlik doğrulama veya yönetimden onay bekliyor.
Ne güzel hayatımıza placeholder(bu bir attribute’dir.) girdi ve aşağıdaki aptal kodu yazmıyoruz.
```
<input type="text" onfocus="if(this.value == 'anahtar kelime giriniz') { this.value=''; }" onblur="if(this.value=='') { this.value='anahtar kelime giriniz'; }" value="anahtar kelime giriniz" >
```
Placeholder attribute kullanı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;
}
```
Burada gördüğünüz gibi placeholder attribute içine yazılan değere opacity değeri veriyor.

Firefox ve IE ailesinde (sadece IE10) opacity ile düzeltebiliyoruz ama Chrome koduna renk kodunu yazmadan düzeltme yapmıyor. // Sebebini anlamadım

Placeholder Internet Explorer10 ve altında çalışmıyor,r bunun için internetten placeholder.js araması yapıp çalışır vaziyete getirebilirsiniz. Ufak bir not

JsFiddle ön izleme -> http://jsfiddle.net/ync4v0nj/light/

Kaynak -> HTML5 placeholder renk değiştirme