Date (tarih) tipindeki girdiler (inputlar) kullanıcıya takvimden bir tarih seçme imkanı sağlar. Ancak bu tipde placeholder kullanılmadığı durumlarda çok hoş bir görüntü elde edemeyebiliriz. Daha güzel bir görüntü elde etmek için diğer girdi (input) tiplerinde olduğu gibi tarih tipinde de öncelikle placeholder attribute’unu kullanarak göstermek istediğimiz yazıyı yazmalıyız.
<input placeholder="Type Date" type="text" onfocus="(this.type = 'date')" id="date">
Eğer placeholder’ı istediğiniz şekilde görüntüleyemezseniz aşağıdaki kodları CSS dosyanıza ekleyin. Sorun çözülecektir.
input[type="date"]::before{
content: attr(placeholder) ": ";
}
input[type="date"]:focus::before {
content: "" !important;
}See the Pen input [type="date"] placeholder by Yasin BARAN (@brnysn) on CodePen.
