स्पैन का उपयोग किए बिना एक HTML सूची के बुलेट रंग बदलें

Question

मैं सोच रहा था कि क्या सूची में गोलियों पर रंग बदलने का कोई तरीका है।

मेरे पास इस तरह की एक सूची है:

<ul>
   <li>House</li>
   <li>Car</li>
   <li>Garden</li>
</ul>

मेरे लिए यह संभव नहीं है कि मैं इस तरह के 'स्पैन' और 'पी' के रूप में कुछ भी सम्मिलित करूं। तो क्या मैं गोलियों का रंग बदल सकता हूं लेकिन कुछ स्मार्ट तरीके से टेक्स्ट नहीं?

Answer 1

यदि आप एक छवि का उपयोग कर सकते हैं तो आप ऐसा कर सकते हैं। और एक छवि के बिना आप केवल गोलियों के रंग को बदलने में सक्षम नहीं होंगे और पाठ को नहीं।

एक छवि का उपयोग करना

li { list-style-image: url(images/yourimage.jpg); }

देख

सूची-शैली-छवि

एक छवि का उपयोग किए बिना

फिर आपको HTML मार्कअप को संपादित करना होगा और सूची के अंदर एक स्पैन शामिल करना होगा और विभिन्न रंगों के साथ ली और स्पैन को रंग देना होगा।

Comments

Jep यह काम कर सकता है। लेकिन वास्तव में मैंने एक पृष्ठभूमि-छवि का उपयोग करने का फैसला किया, और फिर एक सूची-शैली-प्रकार: कोई नहीं; इसने मुझे "बुलेट" को सूची-शैली-छवि की तुलना में थोड़ा अधिक स्थान देने की स्वतंत्रता दी। लेकिन फिर भी आपको 1+ और सही उत्तर मिलता है।

— किम एंडरसन

डेटा-यूआरआई svgs के रूप में अच्छी तरह से काम करता है:list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><circle fill="red" cx="5" cy="5" r="2"/></svg>');

— जॉन

@JonSurrell पद्धति का उपयोग करके मैं बहुत सुखद परिणाम प्राप्त करने में सक्षम था। यह बहुत बुरा है कि यह सुझाए गए उत्तरों में से एक नहीं है। समाधान IE8 के बाद के लिए क्रॉस-ब्राउज़र है और दिलचस्प कस्टम आकार बनाने के लिए आसानी से परिवर्तनीय है।

— कोल्डबेन

@KoldBane मेरा नया जवाब देखें :)

— जॉन

@DimitryK कृपया मेरे द्वारा लिखे गए पूर्ण उत्तर पर एक नज़र डालें, और वहां किसी भी टिप्पणी को निर्देशित करें। FF43 में अच्छी तरह से काम करता है।

— जॉन सरेल

Answer 2

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

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

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

Comments

इसके अलावा, यहां आप आदेशित सूचियों के लिए एक ही काम कैसे कर सकते हैं: jsfiddle.net/uZRGN

— रात्रि

अति उत्कृष्ट। इस तरह के विस्तृत IE8 + उपयोग के साथ मुझे लगता है कि अब इसका उत्तर होना चाहिए। (ध्यान दें कि मुझे font-size:1emएक बेहतर आनुपातिक गोली

— मिलती थी

मैं इस दृष्टिकोण को नापसंद करता हूं, क्योंकि जब कोई व्यक्ति सूची-शैली-प्रकार के साथ किसी को भी सेट करने की कोशिश करता है, तो क्या होता है? इसका मतलब है कि आपको इन शैलियों को किसी वर्ग के अंतर्गत लाना होगा, जैसे ul.greenDisc

— ctb

Answer 3

हम एस के list-style-imageसाथ जोड़ सकते हैं svg, जो हम कर सकते हैं css में इनलाइन ! यह विधि "गोलियों" पर अविश्वसनीय नियंत्रण प्रदान करती है, जो कुछ भी बन सकती है।

लाल वृत्त प्राप्त करने के लिए, बस निम्नलिखित सीएसएस का उपयोग करें:

ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="2"/></svg>');
}

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

ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="5"/></svg>');
}
ul ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><rect fill="red" x="0" y="0" height="10" width="10"/></svg>');
}
ul ul ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="3"/></svg>');
}
ul ul ul ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><rect fill="red" x="2" y="2" height="4" width="4"/></svg>');
}
ul.bulls-eye {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="5"/><circle fill="white" cx="5" cy="5" r="4"/><circle fill="red" cx="5" cy="5" r="2"/></svg>');
}
ul.multi-color {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="15" height="15"><circle fill="blue" cx="6" cy="6" r="6"/><circle fill="pink" cx="6" cy="6" r="4"/><circle fill="green" cx="6" cy="6" r="2"/></svg>');
}

<ul>
  <li>
    Big circles!

    <ul>
      <li>Big rectangles!</li>
      <li>b
        <ul>
          <li>Small circles!</li>
          <li>c
            <ul>
              <li>Small rectangles!</li>
              <li>b</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>b</li>
</ul>

<ul class="bulls-eye">
  <li>Bulls</li>
  <li>eyes.</li>
</ul>

<ul class="multi-color">
  <li>Multi</li>
  <li>color</li>
</ul>

चौड़ाई / ऊँचाई विशेषताएँ

कुछ ब्राउज़रों की आवश्यकता होती है widthऔर heightउन पर सेट होने के लिए विशेषताएँ होती हैं<svg> , या वे कुछ भी प्रदर्शित नहीं करते हैं। लेखन के समय, फ़ायरफ़ॉक्स के हाल के संस्करण इस समस्या को प्रदर्शित करते हैं। मैंने दोनों विशेषताओं को उदाहरणों में सेट किया है।

एन्कोडिंग

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

डेटा-uri कल्पना है, जो संदर्भ यूआरआई कल्पना का कहना है कि svg के अनुसार इनकोडिंग किया जाना चाहिए यूआरआई कल्पना । साधन पात्रों के सभी प्रकार इनकोडिंग दिया जाना चाहिए कि, उदाहरण के लिए <हो जाता है %3C।

कुछ स्रोत आधार 64 एन्कोडिंग का सुझाव देते हैं, जो एन्कोडिंग मुद्दों को ठीक करना चाहिए, हालांकि यह अनावश्यक रूप से एसवीजी के आकार में वृद्धि करेगा, जबकि यूआरआई एन्कोडिंग नहीं होगा। मैं URI एन्कोडिंग की सलाह देता हूं।

और जानकारी:

ब्राउज़र-समर्थन: > यानी 8

svgs पर सीएसएस चाल

svg पर mdn

Comments

यह अब तक का सबसे अच्छा जवाब है, और यह क्लीवर जैसे प्रस्तुति कन्वर्टर्स के साथ भी काम करता है।

— गबोरस

मैं वास्तव में इस दृष्टिकोण को पसंद करता हूं, क्योंकि शैली उल के अनियमित उपयोग को गड़बड़ नहीं करेगी, अर्थात, जब सूची-शैली-प्रकार कोई भी सेट नहीं होता है, और यह भी क्योंकि यह कुछ अन्य में ली की सामग्री को लपेटने पर निर्भर नहीं करता है तत्व। हालांकि, यह मेरे लिए IE11 या एज में काम नहीं कर रहा है ...?

— ctb

@ctb मैंने उन ब्राउज़रों का विशेष रूप से परीक्षण नहीं किया है, लेकिन क्या आपने एन्कोडिंग कैविटी पढ़ा है? आप "सुंदर" <svg>कोड को कॉपी / पेस्ट करने में सक्षम नहीं हो सकते हैं , इसे पहले एक यूरी एनकोडर के माध्यम से चलाने की कोशिश करें।

— जॉन सुरेल

@ जोंसुरेल हाँ, एक बार मैंने svg कोड को इनकोड किया। Thx, यह बहुत अच्छा था।

— सीटीबी

मुझे यह उत्तर पसंद है क्योंकि यह r = "1.5em" जैसे सापेक्ष आकारों का भी समर्थन करता है

— plexoos

Answer 4

@ मार्क के समाधान का निर्माण - चूंकि बुलेट चरित्र को अलग-अलग फोंट और ब्राउज़रों के साथ प्रदान किया जाता है, इसलिए मैंने एक सीमा बनाने के लिए सीमा-त्रिज्या के साथ निम्नलिखित सीएसएस 3 तकनीक का उपयोग किया, जिस पर मेरा अधिक नियंत्रण है:

li:before {
    content: '';
    background-color: #898989;
    display: inline-block;
    position: relative;
    height: 12px;
    width: 12px;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    margin-right: 4px;
    top: 2px;
}

Comments

@ddilsaver आप सही हैं, मैं पृष्ठभूमि रंग को एक और नियम में सेट कर रहा था जो प्रत्येक पंक्ति वस्तु के लिए विशिष्ट था (क्लाइंट प्रत्येक पर एक अलग रंग चाहता था)। मैंने अपडेट कर दिया है।

— जेसिका

बहुत अच्छा समाधान है। मैं ऊंचाई / चौड़ाई में बदलाव के मामले में सीमा-त्रिज्या को 50% तक बदलने का सुझाव दूंगा ताकि यह थोड़ा और लचीला हो सके।

— टिम

Answer 5

मुझे पता है कि यह वास्तव में, वास्तव में पुराना सवाल है, लेकिन मैं इस के साथ खेल रहा था और एक तरह से आया था जिसे मैंने पोस्ट नहीं किया था। सूची को एक रंग दें और फिर ::first-lineचयनकर्ता का उपयोग करके पाठ रंग को अधिलेखित करें । मैं कोई विशेषज्ञ नहीं हूं इसलिए शायद इस दृष्टिकोण में कुछ गड़बड़ है जो मुझे याद आ रही है, लेकिन यह काम करने लगता है।

li {
  color: blue;
}

li::first-line {
  color: black;
}

<ul>
  <li>House</li>
  <li>Car</li>
  <li>Garden</li>
</ul>

Comments

सिंगल लाइन सूचियों के लिए अच्छा सरल समाधान

— ग्रहक जूल

Answer 6

@Marc और @ जेसिका समाधान दोनों का निर्माण - यह वह समाधान है जिसका मैं उपयोग करता हूं:

li { 
   position:relative;
}
li:before {
      content:'';
      display: block;
      position: absolute;
      width: 6px;
      height:6px;
      border-radius:6px;
      left: -20px;
      top: .5em;
      background-color: #000;
}

मैं emफ़ॉन्ट आकारों के लिए उपयोग करता हूं ताकि यदि आप अपना topमान निर्धारित करते हैं तो .5emइसे हमेशा आपके पाठ की पहली पंक्ति के मध्य बिंदु पर रखा जाएगा। मैंने उपयोग किया left:-20pxक्योंकि ब्राउज़र में गोलियों की डिफ़ॉल्ट स्थिति है: माता-पिता padding/2

Answer 7

मुझे वास्तव में मार्क का जवाब पसंद आया - मुझे अलग-अलग रंगों के एक सेट की जरूरत थी और जाहिर है कि सिर्फ एक वर्ग का उपयोग करना आसान होगा। उदाहरण के लिए, मैंने नारंगी के लिए क्या उपयोग किया है:

ul.orange {
    list-style: none;
    padding: 0px;
}
ul.orange > li:before {
    content: '\25CF ';
    font-size: 15px;
    color: #F00;
    margin-right: 10px;
    padding: 0px;
    line-height: 15px;
}

साथ ही, मैंने पाया कि "सामग्री:" के लिए मैंने जिस हेक्स कोड का उपयोग किया था, वह मार्क के मुकाबले अलग था (हेक्स सर्कल थोड़ा अधिक बैठ गया था)। मैंने जो प्रयोग किया वह बीच में पूरी तरह से बैठ गया लगता है। मुझे कई अन्य आकृतियाँ (वर्ग, त्रिकोण, वृत्त आदि) भी यहीं मिलीं

Answer 8

मेरे लिए सबसे अच्छा विकल्प CSS छद्म तत्वों का उपयोग करना है, इसलिए discबुलेट स्टाइलिंग के लिए यह इस तरह दिखेगा:

ul {
  list-style-type: none;
}

li {
  position: relative;
}

li:before {
  content: '';
  display: block;
  position: absolute;
  width: 5px; /* adjust to suit your needs */
  height: 5px; /* adjust to suit your needs */
  border-radius: 50%;
  left: -15px; /* adjust to suit your needs */
  top: 0.5em;
  background: #f00; /* adjust to suit your needs */
}

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>

टिप्पणियाँ:

• widthऔर heightपॉइंटर्स को गोल रखने के लिए समान मान होना चाहिए
• border-radiusयदि आप squareसूची बुलेट्स चाहते हैं तो आप शून्य पर सेट हो सकते हैं

अधिक गोलियों शैलियों के लिए आप अन्य सीएसएस आकार का उपयोग कर सकते https://css-tricks.com/examples/ShapesOfCSS/ (उदाहरण के त्रिकोण के लिए इस जो काम करने के लिए छद्म तत्वों की आवश्यकता नहीं है चुनते हैं, तो)

Answer 9

:: मार्कर

आप ::markerकिसी सूची आइटम (यानी गोलियों या संख्याओं) के मार्कर बॉक्स का चयन करने के लिए CSS छद्म तत्व का उपयोग कर सकते हैं ।

ul li::marker {
  color: red;
}

नोट: इस उत्तर को पोस्ट करने के समय, यह प्रायोगिक तकनीक माना जाता है और केवल फ़ायरफ़ॉक्स और सफारी (अब तक) में लागू किया गया है।

Comments

परीक्षण और वर्तमान फ़ायरफ़ॉक्स और सफारी में काम करता है। अन्य ब्राउज़रों के लिए समर्थन देखें https://caniuse.com

— डेनियल

Answer 10

@ Ddilsaver के जवाब पर बिल्डिंग। मैं बुलेट के लिए स्प्राइट का उपयोग करने में सक्षम होना चाहता था। यह काम करने के लिए प्रकट होता है:

li {
  list-style: none;
  position: relative;
}

li:before {
  content:'';
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  left: -30px;
  top: 5px;
  background-image: url(i20.png); 
  background-position: 0px -40px; /* or whatever offset you want */
}

Answer 11

मैंने आज यह कोशिश की और इसे टाइप किया:
मुझे अपनी सूचियों (गोलियों और संख्या दोनों) में रंगीन मार्कर प्रदर्शित करने की आवश्यकता थी। मैं इस टिप पर आया और अपने स्टाइलशीट में लिखा कि गुणों का आपसी एकीकरण:

ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0 0 0 15px;
}
ul {}
ol {
  counter-reset: li;
}
li {
  padding-left: 1em; 
}
ul li {}
ul li::before,
ol li::before {
  color: #91be3c;
  display: inline-block;
  width: 1em;
}
ul li::before {
  content: "\25CF";
  margin: 0 0.1em 0 -1.1em;
}
ol li {
  counter-increment: li;
}
ol li::before {
  content: counter(li);
  margin: 0 0 0 -1em;
}

मैंने एक बुलेट प्रदर्शित करने के लिए एक अलग चरित्र चुना, इसे यहां देख रहा हूं । मुझे मार्जिन को आकस्मिक रूप से समायोजित करने की आवश्यकता है, हो सकता है कि मान आपके द्वारा चुने गए फ़ॉन्ट के साथ लागू नहीं होंगे (संख्याएं आपके वेबफॉन्ट का उपयोग करती हैं)।

Answer 12

इसके बजाय इसका उपयोग करने का प्रयास करें:

ul {
  color: red;
}

Answer 13

इनलाइन संस्करण, आउटलुक डेस्कटॉप के लिए काम करता है:

<ul style="list-style:square;">
  <li style="color:red;"><span style="color:black;">Lorem.</span></li>
  <li style="color:red;"><span style="color:black;">Lorem.</span></li>
</ul>

JSFiddle ।