अनियंत्रित सूची में गोलियों के बजाय टिक / चेकमार्क प्रतीक (check) का उपयोग कैसे करें?

Question

मेरे पास एक सूची है जहां मैं सूची पाठ से पहले टिक प्रतीक जोड़ना चाहता हूं। क्या कोई सीएसएस है जो मुझे इस तरह से लागू करने में मदद कर सकता है?

✓ this is my text
✓ this is my text
✓ this is my text
✓ this is my text
✓ this is my text
✓ this is my text

नोट: मुझे इस प्रकार के HTML कोड में चाहिए

<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

Answer 1

आप प्रत्येक सूची आइटम से पहले उस वर्ण को सम्मिलित करने के लिए एक छद्म तत्व का उपयोग कर सकते हैं :

ul {
  list-style: none;
}

ul li:before {
  content: '✓';
}

<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

Comments

मैंने इसका उपयोग किया और यह क्रोम 65 में काम करता है। मैं प्रत्येक <li> को सामान्य रूप से 1px सॉलिड बॉर्डर का उपयोग करके, बायीं ओर फ्लोट बायें और मार्जिन राईट में लपेटने में सक्षम था: इससे पहले - आप अपने एलिमेंट के बैकग्राउंड में बॉर्डर कलर सेट कर सकते हैं।

— यमदूत

समाधान के लिए धन्यवाद! मैंने एक नोट जोड़ा है कि इंडेंटेशन रैपिंग पर खो जाता है। (पोस्ट को संपादित करने के लिए क्षमा याचना, लेकिन सिर्फ एक टिप्पणी छोड़ने से इस मुद्दे को चित्रित करना बेहतर था, और उम्मीद है कि हम इससे निपटने का एक तरीका पा सकते हैं।)

— दान डैस्कलेस्क्यू

@ जोश: एडम के जवाब में रैपिंग समस्या का हल है। मैंने इसे स्पष्ट करने के लिए संपादित किया है, इसे शामिल करने के लिए आपके ऊपर।

— दान डस्केलस्कु

Answer 2

यहां तीन अलग-अलग चेकमार्क शैलियों का उपयोग किया जा सकता है:

ul:first-child  li:before { content:"\2713\0020"; }  /* OR */
ul:nth-child(2) li:before { content:"\2714\0020"; }  /* OR */
ul:last-child   li:before { content:"\2611\0020"; }
ul { list-style-type: none; }

<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

<ul><!-- not working on Stack snippet; check fiddle demo -->
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

jsFiddle

संदर्भ:

• सामग्री का प्रभाव क्या है: "\ 0020"; संपत्ति?
• http://nealchester.com/special-characters/#checkmarks

Comments

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

— दान डैस्कलेस्क्यू

@DanDascalescu, यह उत्तर जोश क्रोज़िएर के समाधान पर विस्तृत है, चेकमार्क विकल्प प्रदान करके जिनके बारे में कुछ लोगों को पता नहीं हो सकता है। वह बहुमूल्य जानकारी है। तथ्य यह है कि वे "डिजाइन विकल्प" हैं, यह उत्तर को कम उपयोगी नहीं बनाता है। मेरे विचार में आपका अपमान अनुचित है: (1) इसका उत्तर बहुत से लोगों के लिए उपयोगी है (और लगभग 30 upvotes), (2) उत्तर शैली विकल्पों के अलावा और कुछ होने का दिखावा नहीं करता है, और (3) I किसी भी अन्य समस्याओं से निपटने का प्रयास नहीं किया गया (जो आप कहते हैं, "वैसे भी बिंदु के अलावा" हैं)

— माइकल बेंजामिन

मेरे द्वारा देखे जाने वाले चेकमार्क विकल्प, \ "2713" और "\ 2714", कच्चे यूनिकोड कोड पॉइंट हैं। मैं नहीं देख सकता कि वे क्या दिखते हैं। यदि उत्तर शैली विकल्प देना चाहता है, तो इसमें कुछ वास्तविक चेकमार्क शामिल हो सकते हैं: ✔, give, give, give। चेकमार्क का उपयोग क्या है, यह एक दिलचस्प समस्या नहीं है। चेकमार्क का उपयोग कैसे करना है। मैं इसे देखता हूं, "मैं इस समय एक नाव को कैसे पेंट करता हूं जो पानी में है", "मैं नीले रंग के किन रंगों को चित्रित कर सकता हूं"। क्या इसका कोई मतलब है?

— डैन डैस्केलस्कु

आपको इस अधिकार को देखने का अधिकार है कि आप जो भी दृष्टिकोण चाहते हैं। मैं आपकी राय के साथ बहस करने वाला नहीं हूं। हालाँकि, तथ्य यह है कि इस पोस्ट पर आने वाले अधिकांश लोग इस उत्तर को उपयोगी पाते हैं। मैं बस उस पर छोड़ दूँगा। प्रतिक्रिया के लिए धन्यवाद। @DanDascalescu

— माइकल बेंजामिन

कई अलग-अलग कारणों से लोग परेशान हैं। लोग अपने से भिन्न कारणों के कारण उखड़ जाते हैं। आप इस उत्तर की सामग्री से असहमत हैं। आप यह नहीं कह रहे हैं कि उत्तर गलत या पुराना है (जैसे आपके द्वारा संदर्भित लिंक में), आपको यह पसंद नहीं है। मेरे साथ ठीक है। आप अपनी राय के हकदार हैं।

— माइकल बेंजामिन

Answer 3

समाधान के अतिरिक्त:

ul li:before {
 content: '✓'; 
}

आप किसी भी एसवीजी आइकन का उपयोग सामग्री के रूप में कर सकते हैं , जैसे कि फ़ॉन्ट असावधान ।

ul {
  list-style: none;
  padding-left: 0;
}
li {
  position: relative;
  padding-left: 1.5em;  /* space to preserve indentation on wrap */
}
li:before {
  content: '';  /* placeholder for the SVG */
  position: absolute;
  left: 0;  /* place the SVG at the start of the padding */
  width: 1em;
  height: 1em;
  background: url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><svg width='18' height='18' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'><path d='M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z'/></svg>") no-repeat;
}

<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>This is my text, it's pretty long so it needs to wrap. Note that wrapping preserves the indentation that bullets had!</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

नोट: अन्य जवाब था कि रैपिंग समस्या को हल करने के लिए:

• हम प्रत्येक के बाईं ओर 1.5 मी स्थान रखते हैं <li>
• उस स्थान के प्रारंभ में SVG को स्थिति दें ( position: absolute; left: 0)

यहाँ अधिक फ़ॉन्ट विस्मयकारी काले आइकन हैं ।

इस CODEPEN को देखें कि आप रंगों को कैसे जोड़ सकते हैं और उनका आकार बदल सकते हैं।

Answer 4

<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

आप इस सरल सीएसएस शैली का उपयोग कर सकते हैं

ul {
     list-style-type: '\2713';
   }

Comments

एडम का जवाब रैपिंग की समस्या को छू गया, लेकिन इसने अतिरिक्त कोड के टन ले लिया ... यह सिर्फ काम करता है। रिक्ति मेरे लिए एक स्पर्श थी, इसलिए मैंने बस <li> से चेकमार्क को दूर करने के लिए इसके अंत में एक अतिरिक्त \ 1 \ 1 को जोड़ना समाप्त कर दिया।

— जेडन बैप्टिस्टा