Ne güzel hayatımıza placeholder(bu bir attribute’dir.) girdi ve aşağıdaki aptal kodu yazmıyoruz.
|
1 |
<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ı
|
1 2 |
<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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
:-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
[blockquote source=”Ufak bir not”]Placeholder Internet Explorer10 ve altında çalışmıyor,r bunun için internetten placeholder.js araması yapıp çalışır vaziyete getirebilirsiniz. [/blockquote]
Kaynaklar
- http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css
- http://www.paulund.co.uk/html5-placeholder
Tüm kodlar :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCTYPE html> <html lang="tr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>HTML5 Placeholder</title> <style> input[type=text]{width: 450px; height: 40px; font-size: 30px; color: #000; display: block; margin: 20px 0; font-family: 'Arial'; font-weight: bold;} textarea{width: 450px; height: 140px; font-size: 30px; color: #000; font-family: 'Arial'; font-weight: bold;} .siyahYazi:-moz-placeholder { /* Firefox 4 - 18 arası */ opacity:1; } .siyahYazi::-moz-placeholder { /* Firefox 19+ */ opacity:1; } .siyahYazi:-ms-input-placeholder { /* Internet Explorer 10+ */ opacity:1; } .siyahYazi::-webkit-input-placeholder { /* WebKit browsers */ opacity:1; color: #000; } </style> </head> <body> <div style='float:left;'> <h1>Placeholder işlem yapılmamış</h1> <input type="text" placeholder="Adınız ve Soyadınız" /> <textarea placeholder="Kısa bir açıklama yazınız"></textarea> </div> <div style='float:left; margin-left: 50px;'> <h1>Placeholder işlem yapılmış</h1> <input type="text" placeholder="Adınız ve Soyadınız" class='siyahYazi'/> <textarea placeholder="Kısa bir açıklama yazınız" class='siyahYazi'></textarea> </div> </body> </html> |
Demo / Ön izleme -> http://calismalar.aycan.net/placeHolder/