Skip to content
Related Articles

Related Articles

CSS | list-style-image Property
  • Last Updated : 09 Aug, 2019

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: 
            }
        </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

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :