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.

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:

• color
• font-size
• font-style
• font-weight
• letter-spacing
• line-height
• padding
• text-align
• text-decoration

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.

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

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;

}