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 1:
html
<!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:
- url: In this value the path to the image is used as a list-item marker.
Syntax:
list-style-image: url;
Example 2:
html
<!DOCTYPE html><html> <head> <title> CSS list-style-image Property </title> <style> ul { list-style-image: } </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:
- 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 and above
- Edge 12.0 and above
- Internet Explorer 4.0 and above
- Firefox 1.0 and above
- Opera 7.0 and above
- Apple Safari 1.0 and above
![https://write.geeksforgeeks.org/wp-content/uploads/listitem-1.png"](https://write.geeksforgeeks.org/wp-content/uploads/listitem-1.png"){kind=link}
Please Login to comment...