CSS | list-style-image Property

The list-style-image property in CSS is used to set the image that will be used as the list item marker.

Syntax:

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

Property values:

none: This value specifies that no image is used as the marker. If this value is set, the marker defined in list-style-type is used instead. This is default value.
Syntax:

list-style-image: none;

Example:

<!DOCTYPE html> 
<html> 
    <head> 
    <title> 
        CSS list-style-image Property 
    </title> 
    <style> 
        ul  { 
          list-style-image: none; 
        } 
    </style> 
    </head> 
    <body style = ""> 
        <h1 style = "color:green;"> 
            GeeksforGeeks 
        </h1> 
          
        <h2> 
            CSS list-style-image Property 
        </h2> 
          
        <p>Sorting Algorithms</p> 
          
        <ul> 
          <li>Bubble Sort</li> 
          <li>Selection Sort</li> 
          <li>Merge Sort</li> 
        </ul> 
    </body> 
</html> 

Output:
liststyleimage

url: In this value the path to the image is used as a list-item marker.
Syntax:

list-style-image: url;

Example:

<!DOCTYPE html> 
<html> 
    <head> 
    <title> 
        CSS list-style-image Property 
    </title> 
    <style> 
        ul  { 
          list-style-image:  
url("https://contribute.geeksforgeeks.org/wp-content/uploads/listitem-1.png"); 
        } 
    </style> 
    </head> 
    <body style = ""> 
        <h1 style = "color:green;"> 
            GeeksforGeeks 
        </h1> 
          
        <h2> 
            CSS list-style-image Property 
        </h2> 
          
        <p>Sorting Algorithms</p> 
          
        <ul> 
          <li>Bubble Sort</li> 
          <li>Selection Sort</li> 
          <li>Merge Sort</li> 
        </ul> 
    </body> 
</html> 

Output:
liststyleimage

initial: This mode sets this property to its default value.
Syntax:
```
list-style-image: initial;
```

Supported Browsers: The browser supported by list-style-image property are listed below:

Google Chrome 1.0
Internet Explorer 4.0
Firefox 1.0
Opera 7.0
Apple Safari 1.0

My Personal Notes

Recommended Posts: