89

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

画像を使用できることはわかっています。できることならやりたくない。

4

16 に答える 16

161

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

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

<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 */
}
于 2008-09-16T20:28:38.367 に答える
45

マークアップを追加せずにこれを管理しましたが、代わりに 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>
于 2010-11-26T21:14:16.433 に答える
6 
<ul>
  <li style="color: #888;"><span style="color: #000">test</span></li>
</ul>

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

于 2008-09-16T20:27:05.593 に答える
3

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

実際には、内部タグを指定して、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>
于 2009-07-05T06:21:40.590 に答える
0 
<ul>
<li style="color:#ddd;"><span style="color:#000;">List Item</span></li>
</ul>
于 2008-09-16T20:34:09.603 に答える
0

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>

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

于 2015-11-25T03:47:45.393 に答える
0

リスト項目内のテキストをスパン (または他の要素) で囲み、箇条書きの色をリスト項目に適用し、テキストの色をスパンに適用します。

于 2008-09-16T20:27:43.563 に答える
0

W3C仕様に従って、

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

しかし、上記のリスト内にスパンを含むアイデアはうまくいくはずです!

于 2008-09-16T20:29:26.150 に答える
0

多くのページがあり、自分でマークアップを編集する必要がない場合は、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
});
于 2013-01-05T20:34:05.377 に答える
0

たとえば、要素ごとに色を設定した場合も同様に機能します。左に余白を追加しました。

<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;
}
于 2017-06-15T12:57:35.980 に答える
-1 
<ul style="color: red;">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
  • 1
  • 二
  • 三
    • 于 2008-09-16T20:29:27.163 に答える
    -1

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

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

    于 2008-09-16T20:53:30.007 に答える
    -2

    CSSを使用するだけです：

    <li style='color:#e0e0e0'>something</li>
    于 2008-09-16T20:28:17.307 に答える
    -5

    CSS で「リスト スタイル」を設定し、それに color: 値を指定します。例：

    ul.colored {list-style: color: green;}
    于 2008-09-16T20:28:01.490 に答える