<p>All I want is to be able to change the color of a bullet in a list to a light gray. It defaults to black, and I can't figure out how to change it.</p>

<p>I know I could just use an image; I'd rather not do that if I can help it.</p>

[{'answer_id': 76603, 'author': 'Jonathan Arkell', 'author_id': 11052, 'author_profile': 'https://Stackoverflow.com/users/11052', 'pm_score': 3, 'selected': False, 'text': '<pre><code>&lt;ul&gt;\n  &lt;li style="color: #888;"&gt;&lt;span style="color: #000"&gt;test&lt;/span&gt;&lt;/li&gt;\n&lt;/ul&gt;\n</code></pre>\n\n<p>the big problem with this method is the extra markup. (the span tag)</p>\n'}, {'answer_id': 76609, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 0, 'selected': False, 'text': '<p>Wrap the text within the list item with a span (or some other element) and apply the bullet color to the list item and the text color to the span.</p>\n'}, {'answer_id': 76616, 'author': 'ahockley', 'author_id': 8209, 'author_profile': 'https://Stackoverflow.com/users/8209', 'pm_score': -1, 'selected': False, 'text': '<p>You\'ll want to set a "list-style" via CSS, and give it a color: value.  Example:</p>\n\n<pre><code>ul.colored {list-style: color: green;}\n</code></pre>\n'}, {'answer_id': 76620, 'author': 'Diodeus - James MacFarlane', 'author_id': 12579, 'author_profile': 'https://Stackoverflow.com/users/12579', 'pm_score': -1, 'selected': False, 'text': "<p>Just use CSS:</p>\n\n<pre><code>&lt;li style='color:#e0e0e0'&gt;something&lt;/li&gt;\n</code></pre>\n"}, {'answer_id': 76626, 'author': 'Prestaul', 'author_id': 5628, 'author_profile': 'https://Stackoverflow.com/users/5628', 'pm_score': 8, 'selected': True, 'text': "<p>The bullet gets its color from the text.  So if you want to have a different color bullet than text in your list you'll have to add some markup.</p>\n\n<p>Wrap the list text in a span:</p>\n\n<pre><code>&lt;ul&gt;\n  &lt;li&gt;&lt;span&gt;item #1&lt;/span&gt;&lt;/li&gt;\n  &lt;li&gt;&lt;span&gt;item #2&lt;/span&gt;&lt;/li&gt;\n  &lt;li&gt;&lt;span&gt;item #3&lt;/span&gt;&lt;/li&gt;\n&lt;/ul&gt;\n</code></pre>\n\n<p>Then modify your style rules slightly:</p>\n\n<pre><code>li {\n  color: red; /* bullet color */\n}\nli span {\n  color: black; /* text color */\n}\n</code></pre>\n"}, {'answer_id': 76638, 'author': 'Aeon', 'author_id': 13289, 'author_profile': 'https://Stackoverflow.com/users/13289', 'pm_score': 0, 'selected': False, 'text': '<p>As per <a href="http://www.w3.org/TR/CSS2/generate.html#lists" rel="nofollow noreferrer">W3C spec</a>, </p>\n\n<blockquote>\n  <p>The list properties ... do not allow authors to specify distinct style (colors, fonts, alignment, etc.) for the list marker ...</p>\n</blockquote>\n\n<p>But the idea with a span inside the list above should work fine!</p>\n'}, {'answer_id': 76639, 'author': 'NerdFury', 'author_id': 6146, 'author_profile': 'https://Stackoverflow.com/users/6146', 'pm_score': -1, 'selected': False, 'text': '<pre><code>&lt;ul style="color: red;"&gt;\n&lt;li&gt;One&lt;/li&gt;\n&lt;li&gt;Two&lt;/li&gt;\n&lt;li&gt;Three&lt;/li&gt;\n&lt;/ul&gt;\n</code></pre>\n\n\n<li>One</li>\n<li>Two</li>\n<li>Three</li>\n\n'}, {'answer_id': 76707, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 0, 'selected': False, 'text': '<pre><code>&lt;ul&gt;\n&lt;li style="color:#ddd;"&gt;&lt;span style="color:#000;"&gt;List Item&lt;/span&gt;&lt;/li&gt;\n&lt;/ul&gt;\n</code></pre>\n'}, {'answer_id': 76942, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': -1, 'selected': False, 'text': '<p>You could use CSS to attain this.  By specifying the list in the color and style of your choice, you can then also specify the text as a different color.</p>\n\n<p>Follow the example at <a href="http://www.echoecho.com/csslists.htm" rel="nofollow noreferrer">http://www.echoecho.com/csslists.htm</a>.</p>\n'}, {'answer_id': 1083559, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 2, 'selected': False, 'text': '<p>Hello maybe this answer is late but is the correct one to achieve this.</p>\n\n<p>Ok the fact is that you must specify an internal tag to make the LIst text be on the usual black (or what ever you want to get it). But is also true that you can REDEFINE any TAGS and internal tags with CSS. So the best way to do this use a SHORTER tag for the redefinition</p>\n\n<p>Usign this CSS definition:</p>\n\n<pre><code>li { color: red; }\nli b { color: black; font_weight: normal; }\n.c1 { color: red; }\n.c2 { color: blue; }\n.c3 { color: green; }\n</code></pre>\n\n<p>And this html code:</p>\n\n<pre><code>&lt;ul&gt;\n&lt;li&gt;&lt;b&gt;Text 1&lt;/b&gt;&lt;/li&gt;\n&lt;li&gt;&lt;b&gt;Text 2&lt;/b&gt;&lt;/li&gt;\n&lt;li&gt;&lt;b&gt;Text 3&lt;/b&gt;&lt;/li&gt;\n&lt;/ul&gt;\n</code></pre>\n\n<p>You get required result. Also you can make each disc diferent color:</p>\n\n<pre><code>&lt;ul&gt;\n    &lt;li class="c1"&gt;&lt;b&gt;Text 1&lt;/b&gt;&lt;/li&gt;\n    &lt;li class="c2"&gt;&lt;b&gt;Text 2&lt;/b&gt;&lt;/li&gt;\n    &lt;li class="c3"&gt;&lt;b&gt;Text 3&lt;/b&gt;&lt;/li&gt;\n &lt;/ul&gt;\n</code></pre>\n'}, {'answer_id': 4288573, 'author': 'Marc', 'author_id': 496015, 'author_profile': 'https://Stackoverflow.com/users/496015', 'pm_score': 6, 'selected': False, 'text': '<p>I managed this without adding markup, but instead using li:before. This obviously has all the limitations of <code>:before</code> (no old IE support), but it seems to work with IE8, Firefox and Chrome after some very limited testing. It\'s working in our controller environment, wondering if anyone could check this. The bullet style is also limited by what\'s in unicode.</p>\n\n<pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;\n&lt;html&gt;\n&lt;head&gt;\n  &lt;style type="text/css"&gt;\n    li {\n      list-style: none;\n    }\n\n    li:before {\n      /* For a round bullet */\n      content:\'\\2022\';\n      /* For a square bullet */\n      /*content:\'\\25A0\';*/\n      display: block;\n      position: relative;\n      max-width: 0px;\n      max-height: 0px;\n      left: -10px;\n      top: -0px;\n      color: green;\n      font-size: 20px;\n    }\n  &lt;/style&gt;\n&lt;/head&gt;\n\n&lt;body&gt;\n  &lt;ul&gt;\n    &lt;li&gt;foo&lt;/li&gt;\n    &lt;li&gt;bar&lt;/li&gt;\n  &lt;/ul&gt;\n&lt;/body&gt;\n&lt;/html&gt;\n</code></pre>\n'}, {'answer_id': 10237554, 'author': 'ghr', 'author_id': 387558, 'author_profile': 'https://Stackoverflow.com/users/387558', 'pm_score': 2, 'selected': False, 'text': "<p>Just do a bullet in a graphics program and use <code>list-style-image</code>:</p>\n\n<pre><code>ul {\n  list-style-image:url('gray-bullet.gif');\n}\n</code></pre>\n"}, {'answer_id': 14176134, 'author': 'alaasdk', 'author_id': 501602, 'author_profile': 'https://Stackoverflow.com/users/501602', 'pm_score': 0, 'selected': False, 'text': '<p>You can use Jquery if you have lots of pages and don\'t need to go and edit the markup your self.</p>\n\n<p>here is a simple example:</p>\n\n<pre><code>$("li").each(function(){\nvar content = $(this).html();\nvar myDiv = $("&lt;div /&gt;")\nmyDiv.css("color", "red"); //color of text.\nmyDiv.html(content);\n$(this).html(myDiv).css("color", "yellow"); //color of bullet\n});\n</code></pre>\n'}, {'answer_id': 16040621, 'author': 'Ky -', 'author_id': 453435, 'author_profile': 'https://Stackoverflow.com/users/453435', 'pm_score': 4, 'selected': False, 'text': '<p>This was impossible in 2008, but it\'s becoming possible soon (hopefully)!</p>\n\n<p>According to <a href="https://www.w3.org/TR/css-lists-3/#marker-pseudo-element" rel="nofollow">The W3C CSS3 specification</a>, you can have full control over any number, glyph, or other symbol generated before a list item with the <code>::marker</code> pseudo-element.\nTo apply this to the most voted answer\'s solution:</p>\n\n<pre><code>&lt;ul&gt;\n  &lt;li&gt;item #1&lt;/li&gt;\n  &lt;li&gt;item #2&lt;/li&gt;\n  &lt;li&gt;item #3&lt;/li&gt;\n&lt;/ul&gt;\n\nli::marker {\n  color: red; /* bullet color */\n}\nli {\n  color: black /* text color */\n}\n</code></pre>\n\n<p><a href="http://jsfiddle.net/9Srpq/" rel="nofollow">JSFiddle Example</a></p>\n\n<p>Note, though, that <strong>as of July 2016</strong>, this solution is only a part of the W3C Working Draft and does not work in any major browsers, yet.</p>\n\n<p>If you want this feature, do these:</p>\n\n<ul>\n<li><a href="https://code.google.com/p/chromium/issues/detail?id=457718&amp;thanks=457718&amp;ts=1423675756" rel="nofollow"><strong>Blink</strong> (Chrome, Opera, Vivaldi, Yandex, etc.): star Chromium\'s issue</a></li>\n<li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=205202" rel="nofollow"><strong>Gecko</strong> (Firefox, Iceweasel, etc.): Click "(vote)" on this bug</a></li>\n<li><s><a href="https://connect.microsoft.com/IE/feedbackdetail/view/1125247/support-marker-pseudo-element#tabs" rel="nofollow"><strong>Trident</strong> (IE, Windows web views): Click "I can too" under "X User(s) can reproduce this bug"</a></s><br/><sup>Trident development has ceased</sup></li>\n<li><a href="https://wpdev.uservoice.com/forums/257854-internet-explorer-platform/suggestions/7084750-css-3-marker-pseudo-element" rel="nofollow"><strong>EdgeHTML</strong> (MS Edge, Windows web views, Windows Modern apps): Click "Vote" on this prpopsal</a></li>\n<li><a href="https://bugs.webkit.org/show_bug.cgi?id=141477" rel="nofollow"><strong>Webkit</strong> (Safari, Steam, WebOS, etc.): CC yourself to this bug</a></li>\n</ul>\n'}, {'answer_id': 33908171, 'author': 'eggy', 'author_id': 1890236, 'author_profile': 'https://Stackoverflow.com/users/1890236', 'pm_score': 0, 'selected': False, 'text': '<p>For a 2008 question, I thought I might add a more recent and up-to-date answer on how you could go about changing the colour of bullets in a list.</p>\n\n<p>If you are willing to use external libraries, <a href="https://fortawesome.github.io/Font-Awesome/examples/#list" rel="nofollow">Font Awesome gives you scalable vector icons</a>, and when combined with <a href="http://getbootstrap.com/css/#helper-classes" rel="nofollow">Bootstrap\'s helper classes</a> (eg. <code>text-success</code>), you can make some pretty cool and customisable lists.</p>\n\n<p>I have expanded on the extract from <a href="https://fortawesome.github.io/Font-Awesome/examples/#list" rel="nofollow">the Font Awesome list examples page</a> below:</p>\n\n<blockquote>\n  <p>Use <code>fa-ul</code> and <code>fa-li</code> to easily replace default bullets in unordered lists.</p>\n</blockquote>\n\n<p><div class="snippet" data-lang="js" data-hide="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /&gt;\r\n&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /&gt;\r\n\r\n&lt;ul class="fa-ul"&gt;\r\n  &lt;li&gt;&lt;i class="fa-li fa fa-circle"&gt;&lt;/i&gt;List icons&lt;/li&gt;\r\n  &lt;li&gt;&lt;i class="fa-li fa fa-check-square text-success"&gt;&lt;/i&gt;can be used&lt;/li&gt;\r\n  &lt;li&gt;&lt;i class="fa-li fa fa-spinner fa-spin text-primary"&gt;&lt;/i&gt;as bullets&lt;/li&gt;\r\n  &lt;li&gt;&lt;i class="fa-li fa fa-square text-danger"&gt;&lt;/i&gt;in lists&lt;/li&gt;\r\n&lt;/ul&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<p>Font Awesome <a href="http://getbootstrap.com/getting-started/#support-ie8-font-face" rel="nofollow">(mostly) supports IE8</a>, and only supports IE7 if you use the <a href="http://fortawesome.github.io/Font-Awesome/3.2.1/get-started/#need-ie7" rel="nofollow">older version 3.2.1</a>.</p>\n'}, {'answer_id': 44568145, 'author': 'Mohammed', 'author_id': 4657565, 'author_profile': 'https://Stackoverflow.com/users/4657565', 'pm_score': 0, 'selected': False, 'text': '<p>It works as well if we set color for each elements for example:\nI added some Margin to left now.</p>\n\n<pre><code>&lt;article class="event-item"&gt;\n    &lt;p&gt;Black text here&lt;/p&gt;\n&lt;/article&gt;\n\n.event-item{\n    list-style-type: disc;\n    display: list-item;\n    color: #ff6f9a;\n     margin-left: 25px;\n}\n.event-item p {\n    margin: 0;\n    color: initial;\n}\n</code></pre>\n'}]
['https://Stackoverflow.com/questions/76564', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/7072/']