есть ли простой способ изменить цвет пули в списке?

<p>все, что я хочу, это иметь возможность изменить цвет пули в списке на светло-серый. по умолчанию он черный, и я не могу понять, как его изменить.</p><p>я знаю, что могу просто использовать изображение; я бы предпочел не делать этого, если смогу помочь.</p>

<p>пуля получает цвет от текста. так что, если вы хотите, чтобы в вашем списке был другой цвет, чем у текста, вам нужно будет добавить немного разметки.</p><p>обернуть текст списка в промежуток:</p><pre><code><ul> <li><span>item #1</span></li> <li><span>item #2</span></li> <li><span>item #3</span></li> </ul> </code></pre><p>затем немного измените ваши правила стиля:</p><pre><code>li { color: red; /* bullet color */ } li span { color: black; /* text color */ } </code></pre>

<p>я справился с этим без добавления разметки, но вместо этого использовал li: before. это, очевидно, имеет все ограничения <code>:before</code> (без старой поддержки ie), но, похоже, оно работает с ie8, firefox и chrome после некоторого очень ограниченного тестирования. он работает в нашей среде контроллера, задаваясь вопросом, может ли кто-нибудь проверить это. стиль пули также ограничен тем, что в юникоде.</p><pre><code><!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> </code></pre>

<p>это было невозможно в 2008 году, но скоро станет возможным (надеюсь)!</p><p>в соответствии с <a href="https://www.w3.org/tr/css-lists-3/#marker-pseudo-element">спецификацией w3c css3</a> , вы можете иметь полный контроль над любым числом, глифом или другим символом, сгенерированным перед элементом списка с псевдоэлементом <code>::marker</code> .... чтобы применить это к решению с наибольшим количеством голосов:</p><pre><code><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 */ } </code></pre><p> <a href="http://jsfiddle.net/9srpq/">пример jsfiddle</a> </p><p>обратите внимание, что <strong>по состоянию на июль 2016 года</strong>, это решение является лишь частью рабочего проекта w3c и пока не работает ни в одном из основных браузеров.</p><p>если вы хотите эту функцию, сделайте следующее:</p><ul> <li> <a href="https://code.google.com/p/chromium/issues/detail?id=457718&thanks=457718&ts=1423675756"><strong>blink</strong> (chrome, opera, вивальди, яндекс и т.д.): звездный выпуск chromium</a> </li> <li> <a href="https://bugzilla.mozilla.org/show\_bug.cgi?id=205202"><strong>gecko</strong> (firefox, iceweasel и т.д.): нажмите «(голосовать)» на эту ошибку</a> </li> <li>
 <a href="https://connect.microsoft.com/ie/feedbackdetail/view/1125247/support-marker-pseudo-element#tabs"><strong>trident</strong> (ie, веб-представления windows): нажмите «я тоже могу» в разделе «x пользователи могут воспроизвести эту ошибку»</a> 
<br/><sup>развитие trident прекратилось</sup></li> <li> <a href="https://wpdev.uservoice.com/forums/257854-internet-explorer-platform/suggestions/7084750-css-3-marker-pseudo-element"><strong>edgehtml</strong> (ms edge, веб-представления windows, приложения windows modern): нажмите «проголосовать» в этом приложении</a> </li> <li> <a href="https://bugs.webkit.org/show\_bug.cgi?id=141477"><strong>webkit</strong> (safari, steam, webos и т.д.): проверьте себя на эту ошибку</a> </li> </ul>

<pre><code><ul> <li style="color: #888;"><span style="color: #000">test</span></li> </ul> </code></pre><p>большая проблема с этим методом - дополнительная разметка. (тег span)</p>

<p>просто сделайте пулю в графической программе и используйте <code>list-style-image</code>:</p><pre><code>ul { list-style-image:url('gray-bullet.gif'); } </code></pre>

<p>здравствуйте, может быть, этот ответ опоздал, но правильный для этого.</p><p>хорошо, дело в том, что вы должны указать внутренний тег, чтобы текст list был обычным черным (или что бы вы ни хотели получить). но верно и то, что вы можете переопределить любые теги и внутренние теги с помощью css. так что лучший способ сделать это - использовать тег shorter для переопределения</p><p>используйте это определение css:</p><pre><code>li { color: red; } li b { color: black; font\_weight: normal; } .c1 { color: red; } .c2 { color: blue; } .c3 { color: green; } </code></pre><p>и этот html-код:</p><pre><code><ul> <li><b>text 1</b></li> <li><b>text 2</b></li> <li><b>text 3</b></li> </ul> </code></pre><p>вы получаете требуемый результат. также вы можете сделать каждый диск разного цвета:</p><pre><code><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> </code></pre>

<p>оберните текст в элементе списка диапазоном (или другим элементом) и примените цвет маркера к элементу списка, а цвет текста - к диапазону.</p>

<p>это работает так же хорошо, если мы установим цвет для каждого элемента, например: я добавил немного margin слева.</p><pre><code><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; } </code></pre>

<p>согласно <a href="http://www.w3.org/tr/css2/generate.html#lists">спецификации w3c</a> , </p><blockquote> <p>свойства списка ... не позволяют авторам определять отдельный стиль (цвета, шрифты, выравнивание и т.д.) для маркера списка ...</p> </blockquote><p>но идея с пролетом внутри списка должна работать нормально!</p>

<p>вы можете использовать jquery, если у вас много страниц и вам не нужно редактировать разметку самостоятельно.</p><p>вот простой пример:</p><pre><code>$("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 }); </code></pre>

<pre><code><ul> <li style="color:#ddd;"><span style="color:#000;">list item</span></li> </ul> </code></pre>

<p>на вопрос 2008 года я подумал, что мог бы добавить более свежий и актуальный ответ о том, как можно изменить цвет пуль в списке.</p><p>если вы хотите использовать внешние библиотеки, <a href="https://fortawesome.github.io/font-awesome/examples/#list">font awesome предоставляет масштабируемые векторные иконки</a> , а в сочетании с <a href="http://getbootstrap.com/css/#helper-classes">вспомогательными классами bootstrap</a> (например, <code>text-success</code>) вы можете создать несколько довольно крутых и настраиваемых списков.</p><p>я расширил извлечение из <a href="https://fortawesome.github.io/font-awesome/examples/#list">страницы примеров списка font awesome</a> ниже:</p><blockquote> <p>используйте <code>fa-ul</code> и <code>fa-li</code> для простой замены маркеров по умолчанию в неупорядоченных списках.</p> </blockquote><p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code><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></code></pre> </div> </div> </p><p>font awesome <a href="http://getbootstrap.com/getting-started/#support-ie8-font-face">(в основном) поддерживает ie8</a> и поддерживает только ie7, если вы используете <a href="http://fortawesome.github.io/font-awesome/3.2.1/get-started/#need-ie7">более старую версию 3.2.1</a> .</p>