HTMLリストの箇条書きの色を変更しますか？

Question 1

リスト内の箇条書きの色を薄い灰色に変更できるようにするだけです。デフォルトは黒で、変更方法がわかりません。

画像を使用できることはわかっています。私がそれを助けることができれば、私はむしろそれをしたくありません。

Question 2

弾丸はテキストからその色を取得します。したがって、リスト内のテキストとは異なる色の箇条書きが必要な場合は、マークアップを追加する必要があります。

リストテキストをスパンでラップします。

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

Question 3

マークアップを追加せずにこれを管理しましたが、代わりに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>

Question 4

これは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年7月現在、このソリューションはW3Cワーキングドラフトの一部にすぎず、主要なブラウザではまだ機能しない。

この機能が必要な場合は、次のようにします。

Question 5

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

この方法の大きな問題は、余分なマークアップです。（スパンタグ）

Question 6

こんにちは多分この答えは遅いですが、これを達成するための正しいものです。

実は、LIstテキストを通常の黒（または取得したいもの）にするために、内部タグを指定する必要があります。ただし、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>

Question 7

グラフィックプログラムで弾丸を実行して使用するだけですlist-style-image：

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

Question 8

リストアイテム内のテキストをスパン（またはその他の要素）でラップし、箇条書きの色をリストアイテムに適用し、テキストの色をスパンに適用します。

Question 9

W3C仕様に従って、

リストのプロパティ...作成者がリストマーカーに個別のスタイル（色、フォント、配置など）を指定することはできません...

しかし、上記のリスト内にスパンがあるアイデアはうまくいくはずです！

Question 10

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

Question 11

ページがたくさんあり、マークアップを自分で編集する必要がない場合は、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
});

Question 12

2008年の質問では、リスト内の箇条書きの色を変更する方法について、より最近の最新の回答を追加する可能性があると思いました。

外部ライブラリを使用する場合は、Font Awesomeでスケーラブルなベクターアイコンを使用できます。Bootstrapのヘルパークラス（例text-success）と組み合わせると、非常にクールでカスタマイズ可能なリストを作成できます。

以下のFontAwesomeリストの例のページからの抜粋を拡張しました。

を使用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>

スニペットを展開

Font Awesomeは（ほとんど）IE8をサポートし、古いバージョン3.2.1を使用する場合にのみIE7をサポートします。

Question 13

たとえば、各要素に色を設定すると、同様に機能します。左にマージンを追加しました。

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

Question 14

これを達成するためにCSSを使用できます。選択した色とスタイルでリストを指定することにより、テキストを別の色として指定することもできます。

http://www.echoecho.com/csslists.htmの例に従ってください。

Question 15

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

1

二

三

Question 16

CSSを使用するだけです。

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

Question 17

CSSを介して「リストスタイル」を設定し、それにcolor：valueを指定することをお勧めします。例：

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