CSS - list-style-image Property

Quiz

CSS list-style-image property is used to add an image as a list item marker.

Syntax

list-style-image: none | url | initial | inherit;

Property Values

Value	Description
none	No image is used as a marker instead a defined marker type will be used. If not defined, the default "disc" type will be used. Default.
url	It specifies the path of the image to be used as the list-item marker.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS List Style Image Property

The following examples explain the list-style-image property with different values.

List Style Image Property with None Value

To not use any image as the marker, we use the none value. Either the default "disc" marker will be used as the marker or any defined marker using list-style-type will be used. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 22px;
         font-weight: bold;
      }

      .unordered1 {
         color: red;
         list-style-image: none;
      }

      .unordered2 {
         color: green;
         list-style-image: none;
         list-style-type: square;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-image property
   </h2>
   <h4>
      list-style-image: none
   </h4>
   <p>
      In this case, the default "disc" marker
      is used as list-style-type property is 
      not defined.
   </p>
   <ul class="unordered1">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
   <p>
      In this case, the square marker is used 
      as list-style-type property is defined 
      as "square".
   </p>
   <ul class="unordered2">
      <li>
         Potato
      </li>
      <li>
         Onion
      </li>
      <li>
         Cabbage
      </li>
      <li>
         Tomato
      </li>
   </ul>
</body>

</html>

List Style Image Property with Image URL

To use an image as the marker for list-items, we specify the image url to the list-style-image property. The specified image will be used as the marker for the list items. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 22px;
         font-weight: bold;
      }

      .unordered1 {
         color: red;
         list-style-image: url("/https/www.tutorialspoint.com/css/images/cursor-zoom-out.png");
         list-style-type: circle;
      }

      .unordered2 {
         color: green;
         list-style-image: url("/https/www.tutorialspoint.com/css/images/cursor-e-resize.png");
         list-style-type: square;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-image property
   </h2>
   <h4>
      list-style-image: url ()
   </h4>
   <ul class="unordered1">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
   <h4>
      list-style-image: url ()
   </h4>
   <ul class="unordered2">
      <li>
         Potato
      </li>
      <li>
         Onion
      </li>
      <li>
         Cabbage
      </li>
      <li>
         Tomato
      </li>
   </ul>
   <p>
      Note: list-style-type is also defined 
      in case the image cannot be used.
   </p>
</body>

</html>

List Style Image Property with Linear Gradient

Instead of an image, we can also use linear-gradient as markers for the list-items. The specified color combinations will be used as marker for the list-items. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 30px;
         font-weight: bold;
      }

      .unordered1 {
         color: red;
         list-style-image: 
         linear-gradient(to right, red, orange, yellow, green);
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-image property
   </h2>
   <h4>
      list-style-image: 
      linear-gradient(to right, red, orange, yellow, green)
   </h4>
   <ul class="unordered1">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

Supported Browsers

Property
list-style-image	1.0	4.0	1.0	1.0	7.0

css_reference.htm

Print Page