30 Mayıs 2015
minimalcoding
2172
1
Html 5 Form Elemanlarına (Yer tutucu) Placeholder ekleme ve Css3 ile sitilendirme.
Html 5 ile birlikte gelen bu özellik sayesinde artık form elemanlarımıza placeholder (Yer tutucu) ekleye biliyor ve bunu Css3 ile sitillendire biliyoruz.
Placeholder; input,textarea vb bilgi girişi yapılan form elemanlarına tanımlayıcı bilgiler eklenmesini sağlayan bir özelliktir.Kullanıcı bu alana tıkladığında placeholder yapısı kaybolacaktır, şmdi bu özelliği daha yakından inceleyelim.
|
1 2 3 4 5 6 7 |
<input type="text" placeholder="Name"/> |
Form elemanlarından input yapımızı sitemize ekledikten sonra css ile placeholder yapımıza renk , font tipi , font boyutu vb. sitil özelliklerini atayabiliriz.
|
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 |
/* WebKit browsers için */ ::-webkit-input-placeholder { color: #F5A623; font-size:16px; font-family: 'Open Sans', sans-serif; } /* Mozilla Firefox 4 to 18 */ :-moz-placeholder { color: #F5A623; font-size:16px; font-family: 'Open Sans', sans-serif; opacity: 1; } /* Mozilla Firefox 19+ */ ::-moz-placeholder { color: #F5A623; font-size:16px; font-family: 'Open Sans', sans-serif; opacity: 1; } /* Internet Explorer 10+ */ :-ms-input-placeholder { color: #F5A623; font-size:16px; font-family: 'Open Sans', sans-serif; } |
Örnek Uygulama
See the Pen JdEpVM by MinimalCoding (@MinimalCoding) on CodePen.
Nejdet Acar
placeholder ın ne olduğunu sayenizde öğrendim. Gerçekten bilmiyordum. Hep nasıl yapıldığını merak ederdim. Çok basitmiş. Özel css tanımlamasak da input alanına tanımladığımız style ile uyumlu bir halde çıkıyor. (en azından bende google chrome da öyle oldu)
Teşekkür ederim.