Placeholder یا متن راهنما، متنی است که درون فیلدهای ورودی (<input> و <textarea>) نمایش داده می‌شود تا به کاربران کمک کند متوجه شوند که چه اطلاعاتی باید در آن فیلد وارد کنند. در CSS، می‌توان ظاهر این متن را تغییر داد تا با طراحی کلی سایت هماهنگ شود.

در این راهنما، نحوه سفارشی‌سازی placeholder از جمله تغییر رنگ، اندازه فونت، استایل فونت و افکت‌های مختلف را بررسی خواهیم کرد.

۱. نحوه هدف قرار دادن Placeholder در CSS

برای تغییر استایل placeholder، از پسوودو المنت ::placeholder استفاده می‌شود.

مثال ساده

input::placeholder {
    color: gray;
    font-style: italic;
}

✅ نکته:

• این کد رنگ متن placeholder را خاکستری و استایل آن را ایتالیک می‌کند.

۲. تغییر رنگ placeholder

می‌توان رنگ متن placeholder را متناسب با طراحی فرم تغییر داد:

input::placeholder {
    color: #007bff; /* آبی */
}

📌 نکته: برای همخوانی بهتر، می‌توان از رنگی استفاده کرد که کم‌رنگ‌تر از متن اصلی باشد.

۳. تغییر اندازه و فونت placeholder

می‌توان فونت و اندازه متن را سفارشی کرد:

input::placeholder {
    font-size: 16px;
    font-family: 'Arial', sans-serif;
}

✅ نکته:

• font-size اندازه فونت را تنظیم می‌کند.
• font-family نوع فونت را مشخص می‌کند.

۴. ایجاد افکت کم‌رنگ شدن placeholder هنگام تایپ

می‌توان با opacity یک افکت محو شدن ایجاد کرد تا هنگام تایپ، placeholder محو شود:

input::placeholder {
    color: #888;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

input:focus::placeholder {
    opacity: 0;
}

📌 نتیجه:

• هنگام فوکوس روی فیلد (input:focus)، placeholder کم‌کم محو می‌شود.

۵. تغییر استایل Placeholder در مرورگرهای مختلف

برخی مرورگرها نیاز به انتخابگرهای مخصوص دارند:

/* برای همه مرورگرهای مدرن */
input::placeholder {
    color: #888;
}

/* برای فایرفاکس */
input::-moz-placeholder {
    color: #888;
}

/* برای اینترنت اکسپلورر و اج */
input:-ms-input-placeholder {
    color: #888;
}

✅ نکته: در نسخه‌های جدیدتر مرورگرها، ::placeholder استاندارد شده است.

۶. استایل‌دهی به Placeholder در فیلدهای Textarea

متن placeholder در <textarea> را نیز می‌توان سفارشی کرد:

textarea::placeholder {
    color: #555;
    font-size: 14px;
    font-style: italic;
}

📌 نکته:

• تفاوتی بین input و textarea در استایل‌دهی placeholder وجود ندارد.

۷. ترکیب چندین استایل برای Placeholder

می‌توان چند ویژگی را همزمان اعمال کرد تا placeholder ظاهری زیبا و کاربرپسند داشته باشد:

input::placeholder {
    color: #6c757d;
    font-size: 14px;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 1px;
}

✅ ویژگی‌های اعمال شده:

• color: تغییر رنگ
• font-size: تغییر اندازه فونت
• font-style: استایل ایتالیک
• text-transform: تبدیل متن به حروف بزرگ
• letter-spacing: افزایش فاصله بین حروف

۸. نتیجه‌گیری

با استفاده از ::placeholder در CSS، می‌توان ظاهر متن راهنما را مطابق با طراحی وب‌سایت شخصی‌سازی کرد. این کار باعث افزایش خوانایی، زیبایی و کارایی فرم‌ها شده و تجربه کاربری بهتری ارائه می‌دهد.