هل هناك طريقة سهلة لتغيير لون الرمز النقطي في القائمة؟

https://stackoverflow.com/questions/76564

09-06-2019
|

سؤال

كل ما أريده هو أن أتمكن من تغيير لون التعداد النقطي في القائمة إلى اللون الرمادي الفاتح.إنه افتراضي باللون الأسود، ولا أستطيع معرفة كيفية تغييره.

أعلم أنه يمكنني فقط استخدام الصورة؛أفضل ألا أفعل ذلك إذا كان بإمكاني مساعدته.

المحلول

الرصاصة تحصل على لونها من النص.لذا، إذا كنت تريد الحصول على تعداد نقطي بلون مختلف عن النص الموجود في قائمتك، فسيتعين عليك إضافة بعض العلامات.

لف نص القائمة في فترة:

<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 */
}

نصائح أخرى

لقد تمكنت من ذلك دون إضافة علامات، ولكن بدلاً من ذلك استخدمت li:before.ومن الواضح أن هذا لديه كل القيود :before (لا يوجد دعم قديم لـ IE)، ولكن يبدو أنه يعمل مع IE8 وFirefox وChrome بعد بعض الاختبارات المحدودة للغاية.إنه يعمل في بيئة التحكم الخاصة بنا، وأتساءل عما إذا كان بإمكان أي شخص التحقق من ذلك.نمط التعداد النقطي محدود أيضًا بما هو موجود في Unicode.

<!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>

كان هذا مستحيلاً في عام 2008، لكنه أصبح ممكناً قريباً (كما نأمل)!

وفق مواصفات W3C CSS3, ، يمكنك التحكم الكامل في أي رقم أو حرف رسومي أو رمز آخر تم إنشاؤه قبل عنصر القائمة باستخدام الامتداد ::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 ولا يعمل في أي متصفحات رئيسية حتى الآن.

إذا كنت تريد هذه الميزة، قم بما يلي:

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

المشكلة الكبيرة في هذه الطريقة هي العلامات الإضافية.(علامة الامتداد)

مرحبًا، ربما تكون هذه الإجابة متأخرة ولكنها هي الإجابة الصحيحة لتحقيق ذلك.

حسنًا، الحقيقة هي أنه يجب عليك تحديد علامة داخلية لجعل نص القائمة باللون الأسود المعتاد (أو ما تريد الحصول عليه).ولكن من الصحيح أيضًا أنه يمكنك إعادة تعريف أي علامات وعلامات داخلية باستخدام CSS.لذا فإن أفضل طريقة للقيام بذلك هي استخدام علامة SHORTER لإعادة التعريف

استخدم تعريف CSS هذا:

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>

فقط قم بعمل رصاصة في برنامج الرسومات واستخدمه list-style-image:

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

لف النص داخل عنصر القائمة بامتداد (أو أي عنصر آخر) وقم بتطبيق لون التعداد النقطي على عنصر القائمة ولون النص على الامتداد.

حسب مواصفات W3C,

خصائص القائمة...لا تسمح للمؤلفين بتحديد نمط مميز (الألوان والخطوط والمحاذاة وما إلى ذلك) لعلامة القائمة ...

لكن الفكرة ذات النطاق الموجود داخل القائمة أعلاه يجب أن تعمل بشكل جيد!

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

يمكنك استخدام 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
});

بالنسبة لسؤال عام 2008، اعتقدت أنني قد أضيف إجابة أحدث وأحدث حول كيفية تغيير لون التعداد النقطي في القائمة.

إذا كنت على استعداد لاستخدام المكتبات الخارجية، يمنحك Font Awesome أيقونات متجهة قابلة للتطوير, ، وعندما يقترن دروس Bootstrap المساعدة (على سبيل المثال. text-success)، يمكنك إنشاء بعض القوائم الرائعة والقابلة للتخصيص.

لقد توسعت في المقتطف من صفحة أمثلة قائمة Font Awesome أقل:

يستخدم 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.

إنه يعمل كذلك إذا قمنا بتعيين اللون لكل عنصر على سبيل المثال:أضفت بعض الهامش إلى اليسار الآن.

<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;
}

يمكنك استخدام CSS لتحقيق ذلك.ومن خلال تحديد القائمة باللون والنمط الذي تختاره، يمكنك أيضًا تحديد النص بلون مختلف.

اتبع المثال في http://www.echoecho.com/csslists.htm.

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

واحد

اثنين

ثلاثة

فقط استخدم CSS:

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

ستحتاج إلى تعيين "نمط القائمة" عبر CSS وإعطائه لونًا:قيمة.مثال:

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

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow