CSS PLACEHOLDER STYLE VERME

Yer tutucu metni, giriş alanı (input) odaklanmamış olduğunda ve kullanıcının hiçbir yazı girişi olmadığında form alanında gösterilen kısa bir örnek veya ipucu metindir veya kullanıcılara yazı girmesi için ihtiyaç duydukları bilgi veya format olarak kullanıcılara bilgi verir.

Not: Yer tutucu özniteliği aşağıdaki giriş türleriyle çalışır: text, search, url, tel, email, ve password.

Web sayfasının form kısmında yer tutucu olarak metnin eklenmesi ve kaldırılması uzun bir süredir JavaScript ile gerçekleştirilirken, artık HTML5 çalışma taslağında yer tutucu özelliği bulunmaktadır.

Yer tutucu metni, varsayılan olarak açık gri renktedir ve kullanıcıya, metin kutusuna hangi verilerin yazılacağına dair bir ipucu verir.

Metin kutusuna bir şey yazıldığında yer tutucu metni kaybolur.

Yer tutucular ilk başta kullanıcının odaklanması ile kaybolurken, Chrome tarayıcıda kullanıcı bir şeyler yazdıktan sonra kaybolmaktadır.

İstediğiniz yerde yer tutucuları şekillendirmenizi sağlayan ::placeholder öneki CSS style özelliklerine ihtiyacınız olacaktır.

input-placeholder Giriş alanı yer tutucu ile kullanabileceğiniz CSS stili özellikleri şunlardır:

placeholder Yer tutucunun ne olduğunu bilmeyenler için bir örnekle başlayalım.

HTML:

<input type="text" placeholder="mesajınızı girin.">

ÇIKTI:

Input, yer tutucu metni varsayılan olarak açık gri renktedir, ancak bunu birkaç satır CSS ile değiştirebiliriz. Burada bir HTML renk adı kullanarak (örnek:yeşil) input (giriş) metnini renklendireceğiz, bu renklendirmeyi herhangi bir renk metodu(HEX, RGB, HSL) kullanabiliriz.

Firefox'un yer tutucuya daha düşük bir opaklık kattığını unutmayın, bu yüzden bunu opacity css kodu ile düzeltmek için 1 değeri vereceğiz.
::placeholder {/* Chrome, Firefox, Opera, Safari 10.1+ */

  color:green;

 opacity: 1; /* Firefox */
}
::-webkit-input-placeholder { /* Chrome */

  color:green;
}
:-ms-input-placeholder { /* IE 10+ */

  color:green;
}
::-moz-placeholder { /* Firefox 19+ */

  color:green;
}
:-moz-placeholder { /* Firefox 4 - 18 */

  color:green;
}

ÇIKTI:

Burada dikkat etmemiz gereken kısım bazı tamlamaların başında iki adet iki nokta üst üste (::) olması.

Mümkün olduğu kadar çok tarayıcıyı desteklemek için farklı tarayıcı öneklerini eklemenin önemli olduğunu unutmayın.

Metni yer tutucuda (placeholder) kısaltmak

Bazen ipuçları (placeholder), input alanına tam olarak sığamayacak kadar uzun olabilir. Özellikle mobil cihazlarda, (düzenine bağlı olarak) giriş alanı azalır. Bu amaçlar için, giriş alanındaki yer tutucu metnini azaltacak ek özellikler de kullanabilirsiniz

input[placeholder] {

text-overflow:ellipsis;

}

input::-moz-placeholder {

text-overflow:ellipsis;

}

input:-moz-placeholder  {

text-overflow:ellipsis;

}

input:-ms-input-placeholder {

text-overflow:ellipsis;

}

ÇIKTI:

Alana tıklarken metni gizle

Varsayılan olarak, her tarayıcı yer tutucu özelliğini kendi yöntemiyle yorumlar. Bazı tarayıcılarda, alana tıklandığında metni hemen gizler, diğerleri ise giriş alanında en az bir karakter olduğunda gizlenir. Metin, tüm tarayıcılarda olduğu gibi, alana tıklandığında gizlensin.

:focus::-webkit-input-placeholder {

color: transparent

}

:focus::-moz-placeholder {

color: transparent

}

:focus:-moz-placeholder {

color: transparent

}

:focus:-ms-input-placeholder {

color: transparent

}

ÇIKTI:

Yer tutucuyu hoş bir şekilde gizleme


Bir yer tutucunun gösterilmesi ve gizlenmesi için bir geçiş efekti ekleyebilirsiniz:

CSS:

.input::-webkit-input-placeholder       
{
	
 text-indent: 0px;

 transition: text-indent 0.3s ease;

}
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

3341

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML RESME LİNK VERME
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML FORM OLUŞTURMA
  • HTML DİV ve SPAN NEDİR?
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.