css किसी भी छवियों या अवधि टैग का उपयोग किए बिना सीएल के माध्यम से यूएल/एलआई एचटीएमएल सूचियों में बुलेट रंग कैसे सेट करें




css3 layout (13)

इस प्रश्न का उत्तर यहां दिया गया है:

कुछ <li> आइटमों के साथ एक साधारण अपरिवर्तित सूची की कल्पना करें। अब, मैंने बुलेट को list-style:square; माध्यम से स्क्वायर आकार के रूप में परिभाषित किया list-style:square; हालांकि, अगर मैं रंग के साथ <li> आइटम का रंग सेट करता हूं color: #F00; तो सब कुछ लाल हो जाता है!

जबकि मैं केवल स्क्वायर बुलेट का रंग सेट करना चाहता हूं। क्या सीएसएस में गोलियों के रंग को परिभाषित करने का एक शानदार तरीका है ...

... किसी भी स्प्राइट छवियों का उपयोग किए बिना और न ही टैग टैग!

एचटीएमएल

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<ul>

सीएसएस

li{
   list-style:square;
}

यह कर देगा ..

li{
  color: #fff;
}

ली के डेमो लेते हुए, सीमाओं के साथ, अनियमित सूचियां बनाने का एक अलग तरीका यहां है: http://jsfiddle.net/vX4K8/7/

एचटीएमएल

<ul>
    <li>Foo</li>
    <li>Bar</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
        <ul>
        <li>Son</li>
        <li>Of</li>
            <ul>
            <li>Foo</li>
            <li>Bar</li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
            </ul>
        </ul>
</ul>

सीएसएस

ul {
list-style: none;
margin: 0;
}

ul:first-child {
   padding: 0;
}

li {
    line-height: 180%;
    border-bottom: 1px dashed #CCC;
    margin-left: 14px;
    text-indent: -14px;
}

li:last-child {
    border: none;
}

li:before {
    content: "";
    border-left: 4px solid #CCC;
    padding-left: 10px;
}

सीएसएस 3 सूचियों के मॉड्यूल का वर्तमान नमूना ::marker छद्म-तत्व निर्दिष्ट करता है जो वही करेगा जो आप चाहते हैं; एफएफ का परीक्षण ::marker समर्थन करने के लिए नहीं किया गया है और मुझे संदेह है कि या तो सफारी या ओपेरा में है। आईई, ज़ाहिर है, इसका समर्थन नहीं करता है।

तो अभी, ऐसा करने का एकमात्र तरीका list-style-image

मुझे लगता है कि आप एक li साथ एक span की सामग्री लपेट सकते हैं और फिर आप प्रत्येक का रंग सेट कर सकते हैं, लेकिन यह मेरे लिए थोड़ा हैकिश लगता है।


मैं बस इस तरह की समस्या को हल करता हूं, जो सभी ब्राउज़रों में काम करना चाहिए:

HTML:

<ul>
  <li><span>Foo</span></li>
  <li><span>Bar</span></li>
  <li><span>Bat</span></li>
</ul>

सीएसएस:

ul li{
    color: red
}

ul li span{
    color: blue;
}

कुछ समय पहले ब्राउजिंग, इस साइट को मिला, क्या आपने इस विकल्प को आजमाया है?

li{
    list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAE0lEQVQIW2NkYGD4D8RwwEi6AACaVAQBULo4sgAAAABJRU5ErkJggg==");
}

कड़ी मेहनत करता है, लेकिन आप अपनी खुद की पीएनजी छवि / पैटर्न here बना सकते here , फिर अपना कोड कॉपी / पेस्ट करें और अपनी गोलियों को कस्टमाइज़ करें =) अभी भी सुरुचिपूर्ण है?

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

दूसरे उत्तर पर @ ली-वेरु के विचार के बाद और बाहरी स्रोतों के विस्तार के इस दर्शन को लागू करने के बाद मैं इस अन्य समाधान में आया हूं:

  1. अपने सिर में वेबफॉन्ट आइकन लाइब्रेरी की स्टाइलशीट एम्बेड करें, इस मामले में फ़ॉन्ट बहुत बढ़िया:

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

  1. FontAwesome cheatsheet (या किसी अन्य वेबफॉन्ट आइकन) से एक कोड लें।
i.e.:
fa-angle-right [&#xf105;]

और एफ के अंतिम भाग का उपयोग करें ... इस तरह की संख्या के बाद, font-family भी:

li:before {
    content: "\f105";
    font-family: FontAwesome;
    color: red; /* or whatever color you prefer */
    margin-right: 4px;
}

और बस! अब आपके पास कस्टम बुलेट टिप्स भी हैं =)

fiddle


लीरा वेरस समाधान अच्छा है लेकिन मैं गोलियों की स्थिति पर अधिक नियंत्रण चाहता था इसलिए यह मेरा दृष्टिकोण है:

.entry ul {
    list-style: none;
    padding: 0;
    margin: 0;
    /* hide overflow in the case of floating elements around ... */
    overflow: hidden;
}
.entry li { 
    position: relative;
    padding-left: 24px;
}
.entry li:before {
    /* with absolute position you can move this around or make it bigger without getting unwanted scrollbars */
    position: absolute;
    content: "• ";
    color: #E94E24;
    font-size: 30px;
    left: 0;
    /* use fonts like "arial" or use "sans-serif" to make the dot perfect round */ 
    font-family: Arial, sans-serif;
}

ऐसा करने का एक तरीका li:before का उपयोग कर रहा content: "" li:before content: "" और इसे inline-block तत्व के रूप में स्टाइल करना।

यहां एक कार्य कोड स्निपेट है:

ul {
  list-style-type: none; /* no default bullets */
}

li { 
  font-family: Arial;
  font-size: 18px;
}

li:before { /* the custom styled bullets */
  background-color: #14CCBB;
  border-radius: 50%;
  content: "";
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 2px;
  height: 10px;
  width: 10px;
}
<ul>
  <li>Swollen joints</li>
  <li>Pain in hands and knees</li>
  <li>Redness around joints</li>
  <li>Constant fatigue</li>
  <li>Morning stiffness in joints</li>
  <li>High fevers</li>
  <li>Rheumatoid nodules, which develop around joints</li>
</ul>


मैंने कोशिश की और चीजें मेरे लिए अजीब हो गईं। (सीएसएस ने इसके बाद काम करना बंद कर दिया :after {content: "";} इस ट्यूटोरियल का हिस्सा। मैंने पाया कि आप रंग आइटम का उपयोग करके गोलियों को रंग सकते हैं color:#ddd; li आइटम पर ही।

यहां एक example

li{
    color:#ff0000;    
    list-style:square;                
}
a {
    text-decoration: none;
    color:#00ff00;
}

a:hover {
    background-color: #ddd;
}

मुझे पता है कि यह इस पोस्ट के लिए देर से जवाब है, लेकिन संदर्भ के लिए ...

सीएसएस

ul {
    color: red;
}

li {
    color: black;
}

बुलेट रंग को उल टैग पर परिभाषित किया गया है और फिर हम ली रंग को वापस स्विच करते हैं।


ऐसा करने का सबसे आम तरीका इन पंक्तियों के साथ कुछ है:

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  padding-left: 1em; 
  text-indent: -.7em;
}

li::before {
  content: "• ";
  color: red; /* or whatever color you prefer */
}
<ul>
  <li>Foo</li>
  <li>Bar</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
</ul>

JSFiddle: http://jsfiddle.net/leaverou/ytH5P/

संस्करण 8 और ऊपर से IE सहित सभी ब्राउज़रों में काम करेगा।


मैं इस समस्या का समाधान जोड़ रहा हूं।

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

ul          { list-style:none; padding:0; margin:0; }

li          { padding-left:0.75em; position:relative; }

li:before       { content:"•"; color:#e60000; position:absolute; left:0em; }

फिर भी, एक और समाधान का उपयोग करना है :before border-radius: 50% साथ छद्म तत्व :before border-radius: 50% । यह आईई 8 और ऊपर सहित सभी ब्राउज़रों में काम करेगा।

em इकाई का उपयोग फ़ॉन्ट आकार में परिवर्तन की प्रतिक्रिया की अनुमति देता है। आप अपनी जेएसफ़ाइल विंडो का आकार बदलकर इसका परीक्षण कर सकते हैं।

ul {
    list-style: none;
    line-height: 1em;
    font-size: 3vw;
}

ul li:before {
    content: "";
    line-height: 1em;
    width: .5em;
    height: .5em;
    background-color: red;
    float: left;
    margin: .25em .25em 0;
    border-radius: 50%;
}

jsFiddle

आप कुछ अच्छी छाया बनाने के लिए box-shadow साथ भी खेल सकते हैं, कुछ ऐसा जो content: "• " साथ अच्छा नहीं लगेगा content: "• " समाधान।


सबसे आसान चीज जो आप कर सकते हैं वह <li> की सामग्री <span> या समकक्ष में लपेटती है, फिर आप रंग को स्वतंत्र रूप से सेट कर सकते हैं।

वैकल्पिक रूप से, आप अपने इच्छित बुलेट रंग के साथ एक छवि बना सकते हैं और इसे list-style-image संपत्ति के साथ सेट कर सकते हैं।





html-lists