Change bullets color of an HTML list without using span
If you can use an image then you can do this. And without an image you won't be able to change the color of the bullets only and not the text.
Using an image
li { list-style-image: url(images/yourimage.jpg); }
See
list-style-image
Without using an image
Then you have to edit the HTML markup and include a span inside the list and color the li and span with different colors.
How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags
The most common way to do this is something along these lines:
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>
Changing the color of a bullet in a list?
to style bullets you could try doing:
ul { list-style: none; }
li:before { content:"\2022 \00A0"; color: blue; }
DEMO
Change the bullet color of list
Example JS Fiddle
Bullets take the color
property of the list:
.listStyle {
color: red;
}
Note if you want your list text to be a different colour, you have to wrap it in say, a p
, for example:
.listStyle p {
color: black;
}
Example HTML:
<ul class="listStyle">
<li>
<p><strong>View :</strong> blah blah.</p>
</li>
<li>
<p><strong>View :</strong> blah blah.</p>
</li>
</ul>
How would i change the background colour of a bullet point list without changing the colour of the text?
This might help you.. (Not sure why you have multiple ul tags)
<ul style="background-color: aliceblue;">
<li>2 different sizes (Small & Large).</li>
<li>2 different widths (265mm & 420mm).</li>
<li>4 different head rest mounts.</li>
<li>Orderable replacement pads.</li>
</ul>
Change the color of a bullet in a html list?
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.
Wrap the list text in a span:
<ul>
<li><span>item #1</span></li>
<li><span>item #2</span></li>
<li><span>item #3</span></li>
</ul>
Then modify your style rules slightly:
li {
color: red; /* bullet color */
}
li span {
color: black; /* text color */
}
Related Topics
How to Reformat HTML Code Using Sublime Text 2
Cross-Browser Custom Styling For File Upload Button
How to Animate Underline from Left to Right
Problems With CSS Sticky Footer
Flex Container Min-Height Ignored in Ie
Twitter Bootstrap 3 Sticky Footer
How to Assign Multiple Classes to an HTML Container
Show Youtube Video Source into Html5 Video Tag
Html Parsing of Cricinfo Scorecards
Change Bullets Color of an HTML List Without Using Span
What Characters Are Valid in a Url
Which Characters Need to Be Escaped in Html
≪Embed≫ Vs. ≪Object≫
:Last-Child Not Working as Expected
Css: Control Space Between Bullet and ≪Li≫
How to Use Content-Disposition For Force a File to Download to the Hard Drive