How to Remove, Replace or Style List Bullets with Pure CSS
Table of Contents
How to Create a List without Bullets
In some cases, you will need to remove the bullets/style of ordered (<ol>) and unordered (<ul>) lists. Removing HTML list bullets is not difficult. It can be done with the help of the CSS list-style or list-style-type properties.
Your code will look like this:
ul {
list-style-type: none;
}Example of creating a list without bullets:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
list-style: none;
}
ol {
list-style: none;
}
</style>
</head>
<body>
<h2>Unordered list</h2>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
<h2>Ordered list</h2>
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>
</body>
</html>Result
- List Item 1
- List Item 2
- List Item 3
- List Item 1
- List Item 2
- List Item 3
If your intention is to have one list or one list item, not to have bullets or numbers, you had better apply a class that might be used every time you need to remove bullets.
Here, we will have a class named "nolist" for ordered lists, which can be used anytime when needed in the future.
You can also set the class to any of the list items (<li>) to have one or more bullet items not to have a bullet while keeping the other bullets unchanged.
Example of creating a list with one removed bullet from the unordered list:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.nolist {
list-style: none;
}
</style>
</head>
<body>
<h2>Unordered list</h2>
<ul>
<li>List Item 1</li>
<li class="nolist">List Item 2</li>
<li>List Item 3</li>
</ul>
<h2>Ordered list</h2>
<ol class="nolist">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>
</body>
</html>How to Replace List Bullets with Images
CSS can be used to convert list bullets into squares or circles, but this gives little control over their appearance or positioning. Changing standard HTML list bullets to images is an excellent way of connecting them to your website theme and make your site visually more attractive.
There are two ways of setting images for list items:
- Use the list-style-image property to replace the HTML bullets with graphic images. Moreover, in most modern browsers, the placement of these images is inconsistent. There is also very little control over how next to the list items the bullets appear.
Example of replacing list bullets with images using the list-style-image property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
list-style-image: url("/uploads/media/default/0001/02/1ac48d17fa5906a111bba2c4ca6f1363acb1893a.png");
}
</style>
</head>
<body>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</body>
</html>- A better variant is using background images for bullets.
First of all, remove the bullets with the "none" value of the list-style-type property. Then, remove the left-indentation constantly across all browsers by setting both padding and margin to "0" for the <ul> element.
Set a background image for the <li> elements with the CSS background-image property. To stop the background image from repeating under the list items, set the background-repeat property to "no-repeat". Then, add the background-position property.
To move the content away from the background image, apply padding-left to the <li> elements.
Example of replacing list bullets with images using background properties:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
background-image: url("/uploads/media/default/0001/02/1ac48d17fa5906a111bba2c4ca6f1363acb1893a.png");
background-repeat: no-repeat;
background-position: 1px;
padding-left: 20px;
}
</style>
</head>
<body>
<ul>
<li>Green</li>
<li>Blue</li>
<li>Yellow</li>
<li>Red</li>
</ul>
</body>
</html>In standard HTML lists, there is a certain amount of left-indentation. The amount varies on each browser. Some browsers use padding (Mozilla, Safari) and others use margins (Opera) to set the amount of indentation.
In the case that the left-indentation is required, it is recommended to use margin-left. As the padding is currently set to "0", it's possible to define an exact measurement for the left margin that will be consistent across all browsers.
How to Create Horizontal Lists
Making horizontal lists is not so difficult. It is a good way of making lists act like buttons or navigation menus. Many methods can be used for making a horizontal list. The main thing to set is the display: inline, defined for the <li> element.
Example of creating horizontal lists:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#container ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#container ul li {
display: inline;
}
#container ul li a {
text-decoration: none;
padding: 5px 20px;
color: #fff;
background-color: #1c87c9;
}
#container ul li a:hover {
color: #fff;
background-color: #369;
}
</style>
</head>
<body>
<div id="container">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
</body>
</html>How to Style Lists
Style your lists with colors specifying the color and background-color for them.
Example of styling an ordered and unordered list:
<!DOCTYPE html>
<html>
<head>
<style>
ol {
background: #1c87c9;
padding: 20px;
color: cyan;
}
ul {
background: #8ebf42;
padding: 20px;
}
ol li {
background: #666;
padding: 5px;
margin-left: 35px;
}
ul li {
background: #eee;
margin: 5px;
}
</style>
</head>
<body>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>Make a full-width bordered list using the CSS border and border-bottom properties.
Example of creating a full-width bordered list:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
border: 1px solid #ddd;
background-color: #eee;
list-style-type: none;
padding: 0;
}
ul li {
padding: 8px 10px;
border-bottom: 1px solid #ddd;
}
ul li:last-child {
border-bottom: none;
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>Add a border to your list items using the CSS border-left property.
Example of creating a left-bordered list:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
border-left: 5px solid #8ebf42;
background-color: #eee;
list-style-type: none;
padding: 10px 20px;
}
</style>
</head>
<body>
<div id="container">
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</div>
</body>
</html>To have different list bullets in one list, you just need to apply a class to each list item and specify the list-style for them separately.
Example of creating a list with different list bullets:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.disc {
list-style: disc;
}
.square {
list-style: square;
}
.armenian {
list-style: armenian;
}
.lower-greek {
list-style: lower-greek;
}
</style>
</head>
<body>
<ul>
<li class="disc">Disc bullet</li>
<li class="square">Square bullet</li>
<li class="armenian">Armenian bullet</li>
<li class="lower-greek">Lower-greek bullet</li>
</ul>
</body>
</html>All List Item Markers Example
Here, find an example which contains all the different types that ordered (<ol>) and unordered (<ul>) lists can have.
Example of creating different list item markers:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
ol.e {
list-style-type: armenian;
}
ol.f {
list-style-type: decimal;
}
ol.g {
list-style-type: cjk-ideographic;
}
ol.h {
list-style-type: decimal-leading-zero;
}
ol.i {
list-style-type: georgian;
}
ol.j {
list-style-type: hebrew;
}
ol.k {
list-style-type: hiragana;
}
ol.l {
list-style-type: hiragana-iroha;
}
ol.m {
list-style-type: katakana;
}
ol.n {
list-style-type: katakana-iroha;
}
ol.o {
list-style-type: lower-greek;
}
ol.p {
list-style-type: lower-latin;
}
ol.q {
list-style-type: lower-roman;
}
ol.r {
list-style-type: none;
}
ol.s {
list-style-type: upper-alpha;
}
ol.t {
list-style-type: upper-latin;
}
</style>
</head>
<body>
<h2>Examples of unordered lists:</h2>
<h3>Circle</h3>
<ul class="a">
<li>New York</li>
<li>Las Vegas</li>
<li>Washington</li>
</ul>
<h3>Square</h3>
<ul class="b">
<li>San Francisco</li>
<li>Los Angeles</li>
<li>Miami</li>
</ul>
<h2>Examples of ordered lists:</h2>
<h3>Upper-roman</h3>
<ol class="c">
<li>Barcelona</li>
<li>Madrid</li>
<li>London</li>
</ol>
<h3>Lower-alpha</h3>
<ol class="d">
<li>Dubai</li>
<li>Abu Dhabi</li>
<li>Qatar</li>
</ol>
<h3>Armenian</h3>
<ol class="e">
<li>Yerevan</li>
<li>Paris</li>
<li>Rome</li>
</ol>
<h3>Decimal</h3>
<ol class="f">
<li>Sydney</li>
<li>Hong Kong</li>
<li>Moscow</li>
</ol>
<h3>Cjk-ideographic</h3>
<ol class="g">
<li>Kiev</li>
<li>Saint-Petersburg</li>
<li>Tula</li>
</ol>
<h3>Decimal-leading-zero</h3>
<ol class="h">
<li>Bangkok</li>
<li>Gyumri</li>
<li>Valencia</li>
</ol>
<h3>Georgian</h3>
<ol class="i">
<li>Madrid</li>
<li>Barcelona</li>
<li>Prague</li>
</ol>
<h3>Hebrew</h3>
<ol class="j">
<li>Jerusalem</li>
<li>Toronto</li>
<li>Prague</li>
</ol>
<h3>Hiragana</h3>
<ol class="k">
<li>Cairo</li>
<li>Tokyo</li>
<li>Athens</li>
</ol>
<h3>Hiragana-iroha</h3>
<ol class="l">
<li>Tehran</li>
<li>Tavriz</li>
<li>Tel Aviv</li>
</ol>
<h3>Katakana</h3>
<ol class="m">
<li>Munich</li>
<li>Berlin</li>
<li>Bavaria</li>
</ol>
<h3>Katakana-iroha</h3>
<ol class="n">
<li>Brussels</li>
<li>Istanbul</li>
<li>Sydney</li>
</ol>
<h3>Lower-greek</h3>
<ol class="o">
<li>Seville</li>
<li>Granada</li>
<li>Venice</li>
</ol>
<h3>Lower-latin</h3>
<ol class="p">
<li>Budapest</li>
<li>Vienna</li>
<li>Amsterdam</li>
</ol>
<h3>Lower-roman</h3>
<ol class="q">
<li>Buenos Aires</li>
<li>Rio de Janeiro</li>
<li>San Paolo</li>
</ol>
<h3>None</h3>
<ol class="r">
<li>Vilnius</li>
<li>Tallinn</li>
<li>Riga</li>
</ol>
<h3>Upper-alpha</h3>
<ol class="s">
<li>Montreal</li>
<li>Melbourne</li>
<li>Edinburgh</li>
</ol>
<h3>Upper-latin</h3>
<ol class="t">
<li>Dublin</li>
<li>Mexico</li>
<li>Florence</li>
</ol>
</body>
</html>