HTML सूची में बुलेट का रंग बदलें?

Question 1

मैं बस इतना चाहता हूं कि एक सूची में बुलेट के रंग को हल्के भूरे रंग में बदलने में सक्षम होना चाहिए। यह काले रंग में चूक करता है, और मैं यह नहीं समझ सकता कि इसे कैसे बदला जाए।

मुझे पता है कि मैं सिर्फ एक छवि का उपयोग कर सकता हूं; मैं ऐसा नहीं करूंगा, अगर मैं इसकी मदद कर सकता हूं।

Question 2

गोली पाठ से अपना रंग प्राप्त करती है। इसलिए यदि आप अपनी सूची में पाठ से अलग रंग की बुलेट रखना चाहते हैं तो आपको कुछ मार्कअप जोड़ना होगा।

एक स्पैन में लिस्ट टेक्स्ट को लपेटें:

<ul>
  <li><span>item #1</span></li>
  <li><span>item #2</span></li>
  <li><span>item #3</span></li>
</ul>

फिर अपनी शैली के नियमों को थोड़ा संशोधित करें:

li {
  color: red; /* bullet color */
}
li span {
  color: black; /* text color */
}

Question 3

मैंने इसे मार्कअप को जोड़ने के बिना प्रबंधित किया, लेकिन इसके बजाय ली का उपयोग कर: पहले। यह स्पष्ट रूप से :before(कोई पुराना IE समर्थन) की सभी सीमाएं हैं , लेकिन यह कुछ बहुत ही सीमित परीक्षण के बाद IE8, फ़ायरफ़ॉक्स और क्रोम के साथ काम करने लगता है। यह हमारे नियंत्रक वातावरण में काम कर रहा है, अगर किसी को यह जाँच सकता है सोच रहा था। बुलेट शैली भी यूनिकोड में सीमित है।

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <style type="text/css">
    li {
      list-style: none;
    }

    li:before {
      /* For a round bullet */
      content:'\2022';
      /* For a square bullet */
      /*content:'\25A0';*/
      display: block;
      position: relative;
      max-width: 0px;
      max-height: 0px;
      left: -10px;
      top: -0px;
      color: green;
      font-size: 20px;
    }
  </style>
</head>

<body>
  <ul>
    <li>foo</li>
    <li>bar</li>
  </ul>
</body>
</html>

Question 4

2008 में यह असंभव था, लेकिन यह जल्द ही संभव हो रहा है (उम्मीद है)!

द डब्ल्यू 3 सीएसएस 3 विनिर्देश के अनुसार , आप ::markerछद्म तत्व के साथ किसी सूची आइटम से पहले उत्पन्न किसी भी संख्या, ग्लिफ़ या अन्य प्रतीक पर पूर्ण नियंत्रण रख सकते हैं । इसे सबसे अधिक वोट किए गए उत्तर के समाधान पर लागू करने के लिए:

<ul>
  <li>item #1</li>
  <li>item #2</li>
  <li>item #3</li>
</ul>

li::marker {
  color: red; /* bullet color */
}
li {
  color: black /* text color */
}

JSFiddle उदाहरण

ध्यान दें, हालांकि, कि जुलाई 2016 तक , यह समाधान W3C वर्किंग ड्राफ्ट का केवल एक हिस्सा है और अभी तक किसी भी प्रमुख ब्राउज़रों में काम नहीं करता है।

यदि आप यह सुविधा चाहते हैं, तो ये करें:

Question 5

<ul>
  <li style="color: #888;"><span style="color: #000">test</span></li>
</ul>

इस विधि के साथ बड़ी समस्या अतिरिक्त मार्कअप है। (स्पैन टैग)

Question 6

नमस्कार शायद यह उत्तर देर से है लेकिन इसे प्राप्त करने के लिए सही है।

ठीक है तथ्य यह है कि आपको LIst पाठ को सामान्य काले पर (या कभी भी आप जो भी प्राप्त करना चाहते हैं) बनाने के लिए एक आंतरिक टैग निर्दिष्ट करना होगा। लेकिन यह भी सच है कि आप सीएसएस के साथ किसी भी टैग और आंतरिक टैग को पुनर्परिभाषित कर सकते हैं। तो ऐसा करने का सबसे अच्छा तरीका पुनर्वितरण के लिए SHORTER टैग का उपयोग करना है

इस सीएसएस परिभाषा का पालन करें:

li { color: red; }
li b { color: black; font_weight: normal; }
.c1 { color: red; }
.c2 { color: blue; }
.c3 { color: green; }

और यह HTML कोड:

<ul>
<li><b>Text 1</b></li>
<li><b>Text 2</b></li>
<li><b>Text 3</b></li>
</ul>

आपको अपेक्षित परिणाम मिलता है। इसके अलावा आप प्रत्येक डिस्क अलग रंग बना सकते हैं:

<ul>
    <li class="c1"><b>Text 1</b></li>
    <li class="c2"><b>Text 2</b></li>
    <li class="c3"><b>Text 3</b></li>
 </ul>

Question 7

बस एक ग्राफिक्स प्रोग्राम में एक बुलेट करें और उपयोग करें list-style-image:

ul {
  list-style-image:url('gray-bullet.gif');
}

Question 8

एक स्पैन (या किसी अन्य तत्व) के साथ सूची आइटम के भीतर पाठ लपेटें और बुलेट आइटम को सूची आइटम और पाठ रंग को स्पैन पर लागू करें।

Question 9

W3C कल्पना के अनुसार ,

सूची गुण ... लेखकों को सूची मार्कर के लिए अलग शैली (रंग, फ़ॉन्ट, संरेखण, आदि) निर्दिष्ट करने की अनुमति नहीं देते हैं ...

लेकिन ऊपर की सूची के अंदर एक अवधि के साथ विचार ठीक काम करना चाहिए!

Question 10

<ul>
<li style="color:#ddd;"><span style="color:#000;">List Item</span></li>
</ul>

Question 11

यदि आपके पास बहुत सारे पृष्ठ हैं तो आप Jquery का उपयोग कर सकते हैं और अपने स्वयं के मार्कअप को जाने और संपादित करने की आवश्यकता नहीं है।

ये रहा एक सरल उदाहरण:

$("li").each(function(){
var content = $(this).html();
var myDiv = $("<div />")
myDiv.css("color", "red"); //color of text.
myDiv.html(content);
$(this).html(myDiv).css("color", "yellow"); //color of bullet
});

Question 12

2008 के एक प्रश्न के लिए, मैंने सोचा कि मैं एक सूची में गोलियों के रंग को बदलने के बारे में और अधिक नवीनतम और अप-टू-डेट उत्तर जोड़ सकता हूं।

यदि आप बाहरी पुस्तकालयों का उपयोग करने के लिए तैयार हैं, तो फ़ॉन्ट विस्मयकारी रूप से आपको स्केलेबल वेक्टर आइकन देता है , और जब बूटस्ट्रैप की सहायक कक्षाओं (जैसे। text-success) के साथ जोड़ा जाता है , तो आप कुछ सुंदर और अनुकूलन योग्य सूची बना सकते हैं।

मैंने नीचे दिए गए फ़ॉन्ट विस्मयकारी सूची उदाहरण पृष्ठ से अर्क पर विस्तार किया है :

का प्रयोग करें fa-ulऔर fa-liआसानी से बिना क्रम वाली सूची में डिफ़ॉल्ट गोलियों की जगह।

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<ul class="fa-ul">
  <li><i class="fa-li fa fa-circle"></i>List icons</li>
  <li><i class="fa-li fa fa-check-square text-success"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin text-primary"></i>as bullets</li>
  <li><i class="fa-li fa fa-square text-danger"></i>in lists</li>
</ul>

स्निपेट का विस्तार करें

फ़ॉन्ट विस्मयकारी (अधिकतर) IE8 का समर्थन करता है , और केवल IE7 का समर्थन करता है यदि आप पुराने संस्करण 3.2.1 का उपयोग करते हैं ।

Question 13

यह काम करता है अगर हम उदाहरण के लिए प्रत्येक तत्वों के लिए रंग सेट करते हैं: मैंने अभी कुछ मार्जिन जोड़ा है।

<article class="event-item">
    <p>Black text here</p>
</article>

.event-item{
    list-style-type: disc;
    display: list-item;
    color: #ff6f9a;
     margin-left: 25px;
}
.event-item p {
    margin: 0;
    color: initial;
}

Question 14

इसे प्राप्त करने के लिए आप CSS का उपयोग कर सकते हैं। अपनी पसंद के रंग और शैली में सूची को निर्दिष्ट करके, आप तब पाठ को एक अलग रंग के रूप में भी निर्दिष्ट कर सकते हैं।

Http://www.echoecho.com/csslists.htm पर उदाहरण का अनुसरण करें ।

Question 15

<ul style="color: red;">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>

एक

दो

तीन

Question 16

बस सीएसएस का उपयोग करें:

<li style='color:#e0e0e0'>something</li>

Question 17

आप सीएसएस के माध्यम से "सूची-शैली" सेट करना चाहते हैं, और इसे एक रंग दे सकते हैं: मूल्य। उदाहरण:

ul.colored {list-style: color: green;}