تخفیف ویژه

آموزش تغییر دادن رنگ Placeholder با استفاده از CSS

دسته بندی: آموزش
زمان مطالعه: 2 دقیقه
۱۲ اردیبهشت ۱۳۹۷

آموزش تغییر دادن رنگ Placeholder با استفاده از CSS

آموزش تغییر دادن رنگ Placeholder با استفاده از CSS

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

ما در اینجا برای مرورگرهای مختلف، روشها و کدهای مختلفی رو قرار میدیم. کدهایی که مربوط به مرورگرهای خاصی هستند در مرورگرهای دیگه شناخته نمیشن و از اونا صرف نظر میشه.

فرض کنید که یک Input بصورت زیر دارید:

<input placeholder="Stack Snippets are awesome!">

خب حالا فرض کنید بخوایم کاری کنیم که بیشتر مرورگرها متن رو با رنگ #909 نشون بدن. برای اینکار بصورت زیر عمل میکنیم:

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #909;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: #909;
   opacity: 1;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: #909;
   opacity: 1;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: #909;
}

::-ms-input-placeholder { /* Microsoft Edge */
   color: #909;
}

::placeholder { /* Most modern browsers support this now. */
   color: #909;
}

همونطور که میبینید برای مرورگرهای با نسخه‌های متفاوت، کدهای مختلفی رو قرار دادیم. سه خط آخر از کد بالا مربوط به مرورگرهای مدرن و به روز هست و دیگه نیاز نیست در اونا از Prefix استفاده کنیم. برای مشاهده میزان پشتیبانی مرورگرها از روش بدون Prefix، میتونین سایت Caniuse رو مشاهده کنید.

به همین راحتی تونستیم رنگ متن Placeholder رو تغییر بدیم.

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

نظرات کاربران

رحیم

عالی بود

رحیم

نشان دادن روش های متفاوت برای مرورگرهای مختلف عالی بود

مجید قیمی

مرسی خیلی به دردم خورد

محمد

دمتون گرم عالی بود

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :