सूची-शैली-प्रकार सीएसएस संपत्ति के लिए टेक्स्ट मान, कैसे?

Question

मैं अनियंत्रित सूचियों के आइटम प्रस्तुत करने के तरीके को अनुकूलित करना चाहता हूं।

मैं जानता हूँ कि मैं list-style-type उपयोग कर सकते हैं none, disc, circle, square और अन्य कम या ज्यादा समर्थित मूल्यों के बीच बदलने के लिए। मुझे यह भी पता है कि छवि को list-style-image संपत्ति में निर्दिष्ट करने वाले सूची मार्करों की डिफ़ॉल्ट उपस्थिति को बदलना संभव है।

समस्या यह है कि मैं large right arrow (►, ►) एचटीएमएल विशेष के बजाय चरित्र उपयोग list-style-image का एक संयोजन और एक त्रिकोणीय छवि के साथ गोली बदलना चाहते है।

क्या यह संभव है? बीटीडब्ल्यू, अगर यह मायने रखता है कि jQuery पहले से ही पेज पर लोड हो चुका है, तो इसका उपयोग करने में कोई समस्या नहीं होगी अगर इससे मदद मिल सके।

धन्यवाद।

- संपादित करें -

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

Answer 1

मेरी जानकारी के लिए, यह list-style-type संपत्ति का उपयोग कर ऐसा करने के लिए संभव नहीं है।

हालांकि, यदि आपका ब्राउज़र :before सीएसएस चयनकर्ता का समर्थन करता है, तो आप सूची आइटम से पहले बुलेट इकाइयों को सम्मिलित करने के लिए इसका उपयोग कर सकते हैं। आप केवल हेक्साडेसिमल में इकाई कोड बदलने की आवश्यकता:

ul { 
    list-style-type: none; 
} 

li:before { 
    content: "\25ba\00a0"; 
} 

आप इस here का प्रदर्शन एक jsFiddle पा सकते हैं।

Answer 2

@ फ़्रेडरिक एक दिलचस्प कामकाज दिखाता है जिसे मैं साथ जाऊंगा, जब तक आपको आईई 6 और 7 का समर्थन नहीं करना पड़ेगा - उस स्थिति में, आपको एक सामान्य HTML तत्व के साथ काम करना होगा जिसमें चरित्र है, और आप शैली इसे सही जगह पर रखने के लिए।

कुछ

तरह

ul { list-style-type: none } /* Adjust margin and padding as you see fit */ 
ul li div.bullet { float: left; width: 30px; margin-right: 12px } 

<li> 
<div class="bullet">&#9658;</div> 
List item 1 
</li> 

Answer 3

आप अपनी सूची शैली लाइन ब्रेक पर एक ही स्थान प्राप्त करने के लिए सूची और सूची तत्व के लिए एक नकारात्मक मार्जिन के लिए एक गद्दी जोड़ने के बारे में लगता है कि प्राप्त करने के लिए :before विधि का उपयोग करते:

ul { 
    list-style: none; 
    padding: 0 0 0 24px 
} 
ul > li:before { 
    content: '\25BA'; 
    float: left; 
    margin-left: -24px 
} 

jsfiddle