Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> CSS

सीएसएस के साथ सूचियों के लिए बुलेट रंग कैसे बदलें?


CSS वाली सूचियों के लिए बुलेट रंग बदलने के लिए, कोड इस प्रकार है -

उदाहरण

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
   body{
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   }
   ul {
      list-style: none;
   }
   ul li{
      font-size: 20px;
      font-weight: 500;
   }
   ul li::before {
      content: "\2022";
      color: rgb(86, 18, 117);
      font-weight: bold;
      display: inline-block;
      width: 1em;
      margin-left: -1em;
}
</style>
</head>
<body>
<h1>Change Bullet Color of List Example</h1>
<ul>
<li>Camel</li>
<li>Goat</li>
<li>Giraffe</li>
<li>Lion</li>
</ul>
</body>
</html>

आउटपुट

उपरोक्त कोड निम्न आउटपुट देगा -

सीएसएस के साथ सूचियों के लिए बुलेट रंग कैसे बदलें?


  1. सीएसएस के साथ सामान्य डिवाइस ब्रेकप्वाइंट के लिए मीडिया प्रश्नों का उपयोग कैसे करें? सीएसएस के साथ सामान्य डिवाइस ब्रेकप्वाइंट के लिए मीडिया प्रश्नों का उपयोग कैसे करें?

    उदाहरण body { font-family:Segoe UI , ताहोमा, जिनेवा, वर्दाना, सेन्स-सेरिफ़; रंग सफेद; } @मीडिया केवल स्क्रीन और (अधिकतम-चौड़ाई:600px) { शरीर {पृष्ठभूमि:rgb(207, 60, 151); } } @मीडिया केवल स्क्रीन और (न्यूनतम-चौड़ाई:600px) { शरीर {पृष्ठभूमि:rgb(0, 128, 107); } } @मीडिया केवल स्क्रीन और (न्यूनतम-चौड़

  1. ::मार्कर सीएसएस चयनकर्ता के साथ सूचियों के लिए बुलेट रंग बदलें ::मार्कर सीएसएस चयनकर्ता के साथ सूचियों के लिए बुलेट रंग बदलें

    सिंटैक्स CSS ::marker चयनकर्ता का सिंटैक्स इस प्रकार है - Selector::marker {    attribute: /*value*/; } उदाहरण निम्नलिखित उदाहरण CSS ::marker चयनकर्ता को दर्शाते हैं। <!DOCTYPE html> <html>    <head>       <style>       &nbs

  1. CSS में टेक्स्टबॉक्स के लिए प्लेसहोल्डर का रंग कैसे बदलें CSS में टेक्स्टबॉक्स के लिए प्लेसहोल्डर का रंग कैसे बदलें

    ::प्लेसहोल्डर छद्म-तत्व का उपयोग करके, हम टेक्स्टबॉक्स के लिए प्लेसहोल्डर टेक्स्ट का रंग बदल सकते हैं। CSS ::प्लेसहोल्डर छद्म तत्व का सिंटैक्स इस प्रकार है - ::placeholder { attribute: /*value*/ } उदाहरण निम्नलिखित उदाहरण CSS ::प्लेसहोल्डर छद्म-तत्व को दर्शाते हैं। <!DOCTYPE html> <htm