リスト内の箇条書きの色を変更する簡単な方法はありますか?

StackOverflow 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年7月現在, 、このソリューションは W3C Working Draft の一部にすぎず、まだ主要なブラウザでは機能しません。

この機能が必要な場合は、次の手順を実行します。

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

この方法の大きな問題は、余分なマークアップであることです。(spanタグ)

こんにちは、おそらくこの答えは遅れていますが、これを達成するための正しい答えです。

実際のところ、LIst テキストを通常の黒 (または任意の黒) にするには、内部タグを指定する必要があります。しかし、CSS を使用して TAGS や内部タグを再定義できることも事実です。したがって、これを行う最良の方法は、再定義に 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>
  • 1つ
  • 二
  • 三つ

    • CSS を使用するだけです。

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

    CSS 経由で「リスト スタイル」を設定し、色を指定します。価値。例：

    ul.colored {list-style: color: green;}
    ライセンス： CC-BY-SA と 帰属
    所属していません StackOverflow
    scroll top