نحوه تغییر دادن رنگ Placeholder با کمک CSS

نحوه تغییر دادن رنگ Placeholder با کمک CSS ، آموزش طراحی وب

در ادامه آموزش های طراحی وب در این پست میخواهیم نحوه تغییر دادن رنگ Placeholder با کمک CSS رو براتون آموزش دهیم.

این کار را به صورت خیلی راحت میتوانید در انواع مرورگر های امروزی انجام بدید.! اما اگر میخواهید کاری انجام کنید که اکثر مرورگرها و حتی مرورگرهای قدیمی نیز این قابلیت را پشتیبانی کنند و استایل را نمایش بدند، باید از روش های که در ادامه پست قرار میدهیم استفاده کنید.

با ما تا آخر مطلب همراه باشید..

آموزش عوض کردن رنگ Placeholder با کمک CSS

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

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

خوب حالا فرض کنید بخواهیم کاری کنیم که اکثر مرورگرها متن رو با رنگ 909# نشان بدند.!

برای نمایش به صورت زیر عمل می‌کنیم:

/* sourcesoft.ir */
::-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 را مشاهده کرده و ویژگی ها را بررسی کنید.اگر شما نیز درخواست آموزش دارید، میتونید از بخش دیدگاه ها با ما در میان بگذارید تا بتوانیم در کمترین زمان ممکن، آموزش خواسته شده شما را آماده کنیم.

امیدواریم این آموزش طراحی وب مورد استفاده شما دوستان قرار گرفته باشد.