CSS – Sayfa 2 – aycan.net

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" >

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ı

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

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.

:-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;
}

:-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 :

<!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>

<!DOCTYPE html>

<head>

<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>

<h1>Placeholder işlem yapılmamış</h1>

</div>

<h1>Placeholder işlem yapılmış</h1>

</div>

</body>

</html>

Demo / Ön izleme -> http://calismalar.aycan.net/placeHolder/

Kategori: CSS

iOS ~ iPhone ve iPad Simulator

CV HTML paylaşımı

HTML5 placeholder renk değiştirme

PSD paylaşımları // Blog ve portfoy sayfası

Responsive çalışma yapan arkadaşların işini hızlandırmak için…