آئیے مندرجہ بالا نحو میں استعمال ہونے والے HTML ٹیگز کی وضاحت کرتے ہیں:

• : اس کا استعمال متن کی شکل میں مختصر اختیار کی وضاحت کے لیے کیا جاتا ہے۔
• : یہ عنصر صارف کو فہرست سے ایک آئٹم منتخب کرنے کے قابل بناتا ہے۔
  <اختیار>: اس کا استعمال ڈراپ ڈاؤن مینو کے اختیارات فراہم کرنے کے لیے کیا جاتا ہے۔

  مندرجہ بالا نحو کی وضاحت کے لیے ہم یہاں ایک عملی مثال پیش کرتے ہیں۔

  مرحلہ 1: ڈراپ ڈاؤن مینو بنائیں

  سب سے پہلے، ہم ایک

  بنائیں گے اور

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

  ٹیگ استعمال کریں گے تاکہ آپشنز کو صارف کے لیے قابلِ ذائقہ بنایا جا سکے اور آپشن ویلیوز کو ' <اختیار> 'ٹیگ۔

  ایچ ٹی ایم ایل

  < div >
  < h1 > لینکس h1 >
  < لیبل > ایک ملک کا انتخاب کریں: لیبل >
  < منتخب کریں نام = 'منتخب کریں' آئی ڈی = 'منتخب کریں' >
  < آپشن چھپا ہوا منتخب کیا گیا۔ > --ایک آپشن منتخب کریں -- اختیار >
  < اختیار قدر = '1' > جرمنی اختیار >
  < اختیار قدر = 'دو' > ایران اختیار >
  < اختیار قدر = '3' > ترکی اختیار >
  < اختیار قدر = '4' > انڈیا اختیار >
  < اختیار قدر = '5' > چین اختیار >
  منتخب کریں >
  div >
  
  
  
  

  نوٹ: ہم نے استعمال کیا ہے ' پوشیدہ منتخب ' وضاحت کرنا ' ایک آپشن منتخب کریں- ” بطور ڈیفالٹ آپشن۔ لیکن جب صارف ان میں سے کسی ایک کو منتخب کرتا ہے تو اسے چھپایا جائے گا۔

  اس کے بعد، ہم CSS پر جائیں گے اور اسے سٹائل کریں گے۔

  مرحلہ 2: سی ایس ایس کا استعمال کرتے ہوئے اسٹائل ڈراپ ڈاؤن مینو

  ہم استعمال کریں گے ' div 'تخلیق شدہ کنٹینر تک رسائی حاصل کرنے اور div کے پس منظر کا رنگ سیٹ کرنے کے لیے' rgb(191, 207, 235) ' ہم div کی اونچائی، متن کا فونٹ سائز، اور متن کا رنگ بھی ترتیب دیں گے ' 150px '،' x-بڑا '، اور ' rgb(2, 0, 0) '، بالترتیب. اگلا، ہم div کا بارڈر سیٹ کریں گے ' 5px '،' چوٹی '، اور ' rgb(108, 75, 209) '

  سی ایس ایس

  div {
  پس منظر کا رنگ: rgb ( 191 , 207 , 235 ) ;
  اونچائی: 150px؛
  فونٹ سائز: x-بڑا؛
  رنگ: آر جی بی ( دو , 0 , 0 ) ;
  بارڈر: 5px ridge rgb ( 108 , 75 , 209 ) ;
  }

  اب، ہم ڈراپ ڈاؤن مینو کو اسٹائل کریں گے اور مینو کے پس منظر کا رنگ سیٹ کریں گے ' rgb(194, 222, 209) اور مینو کی سرحد بطور ' 3px '،' ٹھوس '، اور ' rgb(84, 73, 116) ' اس کے بعد، ہم مینو کی چوڑائی، اونچائی اور فونٹ کا سائز سیٹ کریں گے ' 300px '،' 30px 'اور' بڑا '، بالترتیب:

  منتخب کریں {
  پس منظر: rgb ( 194 , 222 , 209 ) ;
  بارڈر: 3px ٹھوس آر جی بی ( 84 , 73 , 116 ) ;
  چوڑائی: 300px؛
  اونچائی: 30px؛
  فونٹ سائز: بڑا
  }

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

  

  اوپر فراہم کردہ آؤٹ پٹ میں، یہ دیکھا جا سکتا ہے کہ ڈراپ ڈاؤن مینو بن گیا ہے، اور یہ آپ کو اپنی ترجیحات کے مطابق کسی بھی آپشن کو منتخب کرنے کی اجازت دیتا ہے۔ ہم اگلے حصے میں جاتے ہیں، جہاں ہم CSS کا استعمال کرتے ہوئے منتخب کردہ آپشن کا رنگ تبدیل کریں گے۔

  CSS کا استعمال کرتے ہوئے سلیکٹڈ آپشن کا رنگ کیسے تبدیل کیا جائے؟

  مینو کے منتخب کردہ آپشن کا رنگ تبدیل کرنے کے لیے، ' : چیک کیا۔ 'سی ایس ایس کا سلیکٹر استعمال کیا جاتا ہے۔ :checked ایک چھدم کلاس عنصر ہے جو صرف ان پٹ قسم کے عناصر کے ساتھ منسلک کیا جا سکتا ہے، جیسے ' اختیار '،' چیک باکس '، اور ' ریڈیو بٹن ' یہ بنیادی طور پر ان عناصر کی منتخب قدر کے رویے کو تبدیل کرنے کے لیے استعمال ہوتا ہے۔

  نحو

  :checked کا نحو ہے:

  عنصر_نام: چیک کیا گیا۔ {
  سی ایس ایس کے اعلانات؛
  }

  سی ایس ایس ڈیکلریشنز میں آپ آپشن، چیک باکس اور ریڈیو کی منتخب ویلیو کے لیے کوڈ لکھ سکتے ہیں۔

  اب، مینو میں جائیں اور منتخب کردہ آپشن کا رنگ تبدیل کریں: checked سلیکٹر۔ ایسا کرنے کے لیے، ہم استعمال کریں گے ' اختیار 'مینو میں بنائے گئے اختیارات تک رسائی حاصل کرنے کے لیے اور' : چیک کیا۔ 'منتخب مینو آپشن میں سیوڈو کلاس۔ یہ منتخب کردہ آپشن کے رویے کو تبدیل کرنے کی اجازت دیتا ہے۔ اگلا، ہم منتخب کردہ آپشن کا رنگ سیٹ کریں گے ' rgb(246, 250, 0) اور منتخب کردہ آپشن کا پس منظر بطور ' rgb(5, 26, 1) ”:

  آپشن: چیک کیا گیا۔ {
  رنگ: آر جی بی ( 246 , 250 , 0 ) ;
  پس منظر کا رنگ: rgb ( 5 , 26 , 1 ) ;
  }

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

  

  ہم نے CSS کا استعمال کرتے ہوئے منتخب کردہ آپشن کا رنگ تبدیل کرنے کا طریقہ بتایا ہے۔

  نتیجہ

  ' : چیک کیا۔ pseudo-class کا سلیکٹر منتخب کردہ آپشن کا رنگ تبدیل کرنے کے لیے استعمال کیا جاتا ہے۔ :checked کے ساتھ استعمال کیا جاتا ہے ' اختیار ڈراپ ڈاؤن مینو میں سے '، اور اس کے بعد، آپ منتخب کردہ آپشن کا رنگ سیٹ کر سکتے ہیں۔ اس دستی نے ڈراپ ڈاؤن مینو کو بنانے اور اسٹائل کرنے کے طریقہ کار کی وضاحت کی اور پھر CSS کا استعمال کرتے ہوئے منتخب کردہ آپشن کا رنگ تبدیل کرنے کے طریقہ کار کا مظاہرہ کیا۔