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:
- 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:
}
</
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
- Internet Explorer 4.0
- Firefox 1.0
- Opera 7.0
- Apple Safari 1.0