placeholder::

placeholder:: یک pseudo-element می باشد که باعث می شود تا ما بتوانیم در CSS دسترسی به متن placeholder در یک عنصر input را برای زیباسازی داشته باشیم.

اگر با placeholder آشنا نیستید به متنی که به عنوان راهنما در عناصر input قرار می گیرد placeholder می گویند. تصویر زیر را در نظر بگیرید:

به متن “ایمیل خود را وارد کنید” که جنبه راهنمایی دارد و با کلیک کاربر ناپدید می شود placeholder می گویند و ما از طریق انتخابگر placehoder:: در CSS می توانیم به این متن برای استایل دهی دسترسی داشته باشیم.

در برخی مرورگرها برای استفاده از این انتخابگر نیاز به پیشوند داریم مثلا در کروم باید نوشت webkit-input-placeholder-:: یا در اینترنت اکسپلورر داریم ms-input-placeholder-: و در فایرفاکس 19 به بعد داریم moz-placeholder-:: و برای نسخه های قبل تر باید به این صورت moz-placeholder-: بنویسیم.

فرض کنید در HTML داریم:

<input type="email" placeholder="ایمیل خود را وارد کنید">

تکه کد زیر رنگ و اندازه فونت placeholder را تغییر خواهد داد:

::placeholder {
  color: red;
  font-size: 14px;
  font-weight: bold;
}

مثال جالب زیر را هم بررسی کنید:

See the Pen Placeholder transition by Mojtaba Seyedi (@seyedi) on CodePen.

پشتیبانی مرورگرها