web-dev-qa-db-ja.com

CSSを使用して画像やスパタグを使用せずにUL/LI HTMLリストに箇条書きの色を設定する方法

いくつかの<li>項目を含む単純なソートされていないリストを想像してください。ここで、箇条書き記号をlist-style:square;で正方形に定義しました。ただし、<li>項目の色をcolor: #F00;で設定すると、すべては赤になります。

四角い弾の色だけを設定したいのですが。 エレガントな方法はありますか / CSSで箇条書きの色を定義する...

... Spriteイメージもスパンタグも使用せずに！

_ html _ 

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

_ css _ 

li{
   list-style:square;
}
csscss3layoutcolorshtml-lists
489
Sam

これを行う最も一般的な方法は、次のようなものです。

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を含むすべてのブラウザで動作します。

995
Lea Verou

いつか閲覧して、このサイトを見つけた、あなたはこの代替を試したことがありますか？

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

難しく聞こえますが、自分のpng画像/パターンここを作成して、コードをコピー/貼り付けして箇条書きをカスタマイズすることができます。

編集：

もう一つの答えについて@ lea-verouの考えに従って、この外部の情報源の強化の哲学を適用することで、私はこの他の解決策に至りました：

  1. webfontアイコンライブラリのスタイルシートを埋め込む。この場合はFont Awesome：

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

そして、f ...の最後の部分に続けてfont-familyも含めて、次のような数字を続けます。

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

以上です！今、あなたもカスタム箇条書きのヒントを持っています=）

フィドル

87
Facundo Colombier

CSS 3リスト モジュールの現在の仕様は、 ::marker疑似要素 を指定していますが、これはまさにあなたが望むことをするでしょう。 FFは::markerをサポートしないことがテストされています、そして私はSafariかOperaのどちらかがそれを持っているかどうか疑います。 IEは、もちろん、それをサポートしていません。

だから今、これをする唯一の方法はlist-style-imageで画像を使うことです。

liの内容をspanでラップしてからそれぞれの色を設定できると思いますが、それは私には少し厄介です。

45
Alex

私はこの問題を単に解決するだけで、すべてのブラウザで機能するはずです。

HTML： 

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

CSS： 

ul li{
    color: red
}

ul li span{
    color: blue;
}
45
mdthh

そのための1つの方法は、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>
41
Rahul Desai

それでも、別の解決策は、:before疑似要素をborder-radius: 50%とともに使用することです。これはIE 8以上を含むすべてのブラウザで動作します。

emユニットを使用すると、フォントサイズの変更に対する応答性が向上します。あなたはあなたのjsFiddleウィンドウをリサイズすることによってこれをテストすることができます。

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を使っていくつかのNiceシャドウを作成することもできます。これは、content: "• "ソリューションではNiceに見えないものです。

24
Jose Rui Santos

私はこれを試しました、そして、物事は私にとって奇妙になりました。 （このチュートリアルの:after {content: "";}部分の後でcssが機能しなくなりました。li項目自体にcolor:#ddd;を使用するだけで箇条書きに色を付けることができるとわかりました。

これがの例です。

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

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

これにはjQueryを使用します。

jQuery('li').wrapInner('<span class="li_content" />');

といくつかのCSSで：

li { color: red; }
li span.li_content { color: black; }

多すぎるかもしれませんが、CMS用にコーディングしていて、編集者にすべてのリスト項目に追加のスパンを設定するよう依頼したくない場合は便利です。

17
Veerle Verbert

LIにbackground-imageとpadding-leftを付けることをお勧めします。 list-style-image属性はクロスブラウザ環境ではぎりぎりであり、spanのような追加の要素を追加することは不要です。だからあなたのコードはこのようなものになってしまうでしょう：

li {
  background:url(../images/bullet.png) 0 0 no-repeat;
  list-style:none;
  padding-left:10px;
}
10
Philip Schweiger

あなたができる最も簡単なことは、<li>の内容を<span>または同等のものでラップすることです。それからあなたは独自に色を設定することができます。

あるいは、あなたが望む弾丸の色で画像を作り、list-style-imageプロパティでそれを設定することもできます。

9
Adam Bryzak

Lea Verou の変形は、複数行のエントリに完全なインデントを付けることで、次のようになります。

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

li{
    padding-left: 1.5em; 
}

li:before {
    position: absolute;
    content: "•";
    color: red;
    left: 0;
}
8
David

私はこの問題に私の解決策を追加しています。

私はimageを使いたくありません、そして、バリデーターはCSSで負の値を使うことに対してあなたを罰するでしょう、それで私はこのように行きます：

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

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

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

私はそれがこの記事のための少し遅い答えであることを知っています、しかし参考のために...

CSS

ul {
    color: red;
}

li {
    color: black;
}

箇条書きの色はulタグで定義されているので、liの色を元に戻します。

5
webster76

Lea Verousの解決策は優れていますが、弾丸の位置をもっと制御したいので、これが私のアプローチです。

.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;
}
3
Henning Fischer

Leaのデモを取って、ここでは、罫線を使って、番号なしリストを作成する別の方法があります： http://jsfiddle.net/vX4K8/7/

_ html _ 

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

_ css _ 

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
user2188875