استایل دهی به PlaceHolder

شبه المان ::placeholder (یا در بعضی موارد بسته به پیاده‌سازی مرورگرها، شبه کلاس) به شما این امکان را می‌دهد که متن placeholder را در یک عنصر فرم ، استایل دهی کنید. به همین ترتیب ، متن با استایل های درون placeholder تنظیم و هماهنگ می‌شود .

<input type="email" placeholder="info@supportwebs.ir">

نتیجه کد بالا به شکل زیر نمایش داده می شود

شما می‌توانید  متن بالا را در اکثر مرورگرها، با این دانش سطحی از placeholder، استایل دهی کنید و به شکل دلخواه در بیاورید.
نحوه استایل دهی placeholder در css :

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}

تاثیر کد بالا در placeholder به شکل زیر است :

همچنین تمام المان‌های ساختگی(pseudo) می‌تواند در حوزه و میدان عملکرد آن را به عناصر خاص موردنیاز خود محدود کرد ، مثل:

input[type="email"].big-dog::-webkit-input-placeholder {
  color: orange;
}

تفاوت بین  placeholder-shown: و placeholder::

شبه کلاس:placeholder-shown برای انتخاب خودِ ورودی درزمانی است که متن placeholder نمایش داده‌ نمی شود  و این برخلاف ::placeholder است که متن placeholder را استایل دهی می‌کند .
کمی گیج کننده بود نه ! حالا در زیر تعریف از هر دو را همراه با عکس خواهی دید .
placeholder-shown یک شبه کلاس است (در وضعیت‌های خاص یک المان است) و ::placeholder یک شبه المان است (یک‌چیز قابل‌مشاهده که واقعاً در DOM نیست). این تفاوت از وجود یک دونقطه در مقابل دو علامت دونقطه در ابتدای این دو قابل‌ تشخیص است .

نکته:

1. متون مشخص شده توسط کاربر فقط خصوصیات :placeholder-shown را دارند و خصوصیات ::placeholder را ندارند.
2. شبه کلاس:placeholder-shown  می‌تواند بر استایل دهی متن placeholder تأثیرگذار باشد، چراکه یک عنصر والد است (مثل font-size)

تمرین کنید ( آموزهای بالا رو تست کنید و نتیجه به صورت انلاین مشاهده کنید )

See the Pen egwYWb by ehsan darbandi (@supporttech) on CodePen.

خصوصیت های پشتیبانی شده در placeholder

• font
• color
• background
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• text-indent
• opacity