How to Remove, Replace or Style List Bullets with 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 CSS list-style or list-style-type properties.

Your code will look like this:

ul {
list-style-type: none;
}

Example

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

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

<!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</strong></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:

  1. Use list-style-image to replace 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.

HTML bullets can be replaced with images using "list-style-image". However, the placement of these images is inconsistent across most modern browsers.

There is very little control over how the bullets appear beside the list items.

Example

<!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>
  1. A better variant is to use background images for bullets. So, let’s see how it is done step by step:
  • Create a simple unordered list
  • Remove the bullets with the list-style-type: none
  • Remove padding and margins

Standard HTML lists have a certain amount of left-indentation. The amount varies on each browser. Some browsers use padding (Mozilla, Safari) and others use margins (Internet Explorer, Opera) to set the amount of indentation.

In order to remove the left-indentation constantly across all browsers, set both padding and margin to "0" for the <ul> element like this:

ul {
padding: 0;
margin: 0;
}
  • Add your own indent

In the case that the left-indentation is required, it is recommended to use margin-left. As the padding is currently set to "0", an exact measurement can be defined for the left margin that will be consistent across all browsers.

margin-left: 1em;
  • Add the background image

Use the background-image CSS property to add a background image for the <li> element. Thus, the background image will be repeated across the background of each list item, which will not have a good appearance.

  • Set no-repeat

So, in order to stop the background image from repeating under the list items, set the background-repeat property to "no-repeat". There is now only one image per list item, but there is a need to be positioned.

li { 
background-image: url(star.png); 
background-repeat: no-repeat;
}
  • Position the background image

Use the CSS background-position property to set the position of the background images so that they can go with the texts.

The images are now lined up horizontally with the content. However, the content is sitting over the top of the images.

background-position: 1px;
  • Move the content

To move the content away from the background image apply padding-left to the <li> element. In this case, "20px" has been used. As with vertical alignment, list padding will be determined by the size of your image.

padding-left: 20px;

Now let’s see how the full example will look like:

Example

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

It is also possible to have a different background image for each list item. Just add classes and set the background image for each class.

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

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

<!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 border and border-bottom CSS properties:

Example

<!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 border-left CSS property:

Example

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

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

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

Do you find this helpful?

Related articles