تغییر رنگ ورودی placeholder (متن جایگزین) با CSS در HTML5

برای هر ورودی در فرم ها معمولا یک ویژگی یا صفت به نام placeholder یا متن جایگزین وجود دارد که وقتی کاربر هنوز فرم را پر نکرده است نمایش داده می شود. معمولا رنگ متن placeholder همیشه خاکستری کمرنگ است ولی من میخواهم این رنگ را در html5 تغییر دهم.

ولی کدهای زیر را هر چقدر استفاده می کنم کار نمیکنن:

input[placeholder], [placeholder], *[placeholder] {
    color: red !important;
}

این هم کد html:

<input type="text" placeholder="Value">

در واقع کاری که می خوام بکنم اینه که رنگ placeholder از خاکستری یا gray به قرمز یا red تغییر داده بشه.

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

WebKit یا Blink (مرورگرهای سافاری، کروم، اپرا و ماکروسافت edge) از المان pseduo-elemet زیر استفاده می کنند:

::-webkit-input-placeholder

مرورگر موزیلا فایرفاکس از نسخه ۴ تا ۱۸ از pseudo-class به صورت زیر بهره می برد:

:-moz-placeholder

مرورگر موزیلا فایرفاکس از نسخه ۱۹ به بالا، pseudo-element را بکار می گیرد:

::-moz-placeholder

در اینترنت اکسپلورر ۱۰ و ۱۱ pseudo-element به صورت زیر می باشد:

:-ms-input-placeholder

اما از طرفی مرورگرهای مدرن امروزی یا بهتر بگم، مرورگرهایی که از سال ۲۰۱۷ به بعد آپدیت شده اند معمولا از المان دستوری زیر پشتیبانی کرده و می توانید با استفاده از آن رنگ placeholder را به سادگی تغییر دهید:

::placeholder

بنابراین اگر بخواهیم یک جمع کلی در یک نگاه داشته باشید کدهای زیر مربوط به css می باشد:

::-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;
}