Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Usage of CSS list-style-image property
The list-style-image CSS property allows you to replace default list markers (bullets or numbers) with custom images. This property is commonly used to create visually appealing lists with custom icons or graphics.
Syntax
list-style-image: url(image-path) | none | inherit;
Parameters
| Value | Description |
|---|---|
url() |
Specifies the path to the image file |
none |
No image is used (default behavior) |
inherit |
Inherits the value from parent element |
Example: Basic Usage
<html>
<head>
<style>
.custom-list {
list-style-image: url('/images/bullet.gif');
}
.no-image {
list-style-image: none;
}
</style>
</head>
<body>
<h3>List with Custom Image</h3>
<ul class="custom-list">
<li>Karnataka</li>
<li>Tamil Nadu</li>
<li>Kerala</li>
</ul>
<h3>List without Image</h3>
<ul class="no-image">
<li>Mumbai</li>
<li>Delhi</li>
<li>Kolkata</li>
</ul>
</body>
</html>
Example: Inline Style
<html>
<head>
</head>
<body>
<ul>
<li style="list-style-image: url('/images/bullet.gif');">Karnataka</li>
<li style="list-style-image: url('/images/star.png');">Hyderabad</li>
<li style="list-style-image: none;">Chennai</li>
</ul>
</body>
</html>
Key Points
- The image should be small (typically 16x16 pixels) to work well as a list marker
- If the image fails to load, the browser falls back to the default list marker
- Works with both ordered (<ol>) and unordered (<ul>) lists
- Can be combined with other list-style properties for better control
Browser Compatibility
The list-style-image property is supported by all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 4+.
Conclusion
The list-style-image property provides an easy way to customize list markers with images. Use small, optimized images for best results and always consider fallback styling.
Updated on: 2026-03-15T23:18:59+05:30
70 Views
Advertisements