سی ایس ایس کا استعمال کرتے ہوئے ان پٹ پلیس ہولڈر کا رنگ کیسے تبدیل کریں۔

اس دستی میں، ہم سی ایس ایس کا استعمال کرتے ہوئے ان پٹ پلیس ہولڈر کا رنگ تبدیل کرنے کے مختلف طریقوں کی وضاحت کریں گے۔

طریقہ 1: ':: پلیس ہولڈر' سلیکٹر کا استعمال کرتے ہوئے ان پٹ پلیس ہولڈر کا رنگ تبدیل کریں۔

سی ایس ایس ' :: پلیس ہولڈر ” سلیکٹر کو پلیس ہولڈر ٹیکسٹ کے ساتھ فارم کے عناصر کو منتخب کرنے کے لیے استعمال کیا جاتا ہے۔ اسے پلیس ہولڈر ٹیکسٹ کو تبدیل کرنے کے لیے استعمال کیا جا سکتا ہے۔ مزید برآں، آپ اس سلیکٹر کو ان پٹ پلیس ہولڈر کے رنگ میں ترمیم کرنے کے لیے استعمال کر سکتے ہیں۔

نحو

::placeholder کا نحو درج ذیل ہے:

کی جگہ ' قدر ”، آپ ہماری پسند کے مطابق ان پٹ پلیس ہولڈر کا رنگ سیٹ کر سکتے ہیں۔

آئیے عملی مثال کی طرف چلتے ہیں، جہاں ہم ان پٹ پلیس ہولڈر کا رنگ تبدیل کریں گے۔

مثال

ان پٹ پلیس ہولڈر کا رنگ تبدیل کرنے کے لیے، سب سے پہلے، ہم ٹیگ کا استعمال کرتے ہوئے ایک ان پٹ عنصر بنائیں گے اور ان پٹ کی قسم کو ' کے طور پر سیٹ کریں گے۔ متن ' اگلا، ان پٹ پلیس ہولڈر کے متن کو ' کے طور پر سیٹ کریں داخل کریں۔ تمھارا نام '

ایچ ٹی ایم ایل

دیئے گئے کوڈ کا آؤٹ پٹ یہ ہے:

ان پٹ پلیس ہولڈر کا ڈیفالٹ رنگ اوپر دی گئی تصویر میں دکھایا گیا ہے۔

اب، ہم CSS پر جاتے ہیں اور استعمال کرتے ہیں ' :: پلیس ہولڈر ان پٹ پلیس ہولڈر کے متن تک رسائی حاصل کرنے اور اس کا رنگ بطور سیٹ کرنے کے لیے rgb(17, 0, 255) '

سی ایس ایس

جیسا کہ آپ دیکھ سکتے ہیں، شامل کردہ ان پٹ پلیس ہولڈر کا رنگ نیلے رنگ میں تبدیل ہو گیا ہے۔

ان پٹ پلیس ہولڈر کا رنگ تبدیل کرنے کا ایک اور طریقہ ہے۔ آئیے اسے چیک کریں۔

طریقہ 2: '::-webkit-input-placeholder' Pseudo-class عنصر کا استعمال کرتے ہوئے ان پٹ پلیس ہولڈر کا رنگ تبدیل کریں

' :: - webkit-input-placeholder چھدم کلاس عنصر بنیادی طور پر ایک فارم عنصر کے پلیس ہولڈر متن کی نمائندگی کرتا ہے۔ اسے تھیم ڈیزائنرز اور ڈویلپرز پلیس ہولڈر ٹیکسٹ کی شکل کو اپنی مرضی کے مطابق بنانے کے لیے استعمال کر سکتے ہیں۔ مزید برآں، مخصوص عنصر کا استعمال کرکے صارف ان پٹ پلیس ہولڈر کے رنگ میں ترمیم کرسکتا ہے۔

نحو

::-webkit-input-placeholder کا نحو اس طرح دیا گیا ہے:

کی جگہ ' قدر ”، آپ ان پٹ پلیس ہولڈر کا رنگ سیٹ کر سکتے ہیں۔

آئیے اوپر زیر بحث سیوڈو کلاس عنصر کو سمجھنے کے لیے مثال کی طرف چلتے ہیں۔

مثال

CSS فائل میں، استعمال کریں ' ::-webkit-input-placeholder 'سیڈو کلاس عنصر اور رنگ کی قدر کو بطور تفویض کریں' rgb(255, 13, 13) ”:

آؤٹ پٹ

یہاں، آپ دیکھ سکتے ہیں کہ ان پٹ پلیس ہولڈر کا ڈیفالٹ رنگ بدل گیا ہے۔

نتیجہ

ان پٹ پلیس ہولڈر کا رنگ استعمال کرکے تبدیل کیا جاتا ہے ' :: پلیس ہولڈر 'سلیکٹر اور' :: - webkit-input-placeholder 'چھدم کلاس عنصر۔ اس کا استعمال کرتے ہوئے، آپ ان پٹ پلیس ہولڈر کا ڈیفالٹ رنگ تبدیل کر سکتے ہیں۔ اس آرٹیکل میں، ہم نے CSS پراپرٹیز کا استعمال کرتے ہوئے ان پٹ پلیس ہولڈر کا رنگ تبدیل کرنے سے متعلق طریقہ کار کی وضاحت کی ہے۔