CSS свойство list-style-image

Свойство list-style-image используется, чтобы установить изображение вместо маркера для списка элементов.

Если изображение имеет унаследованную ширину и высоту, то использованная ширина и высота являются унаследованными.

Свойство list-style-image применяется к элементам списка и к элементам, для которых установлено свойство display со значением "list-item". По умолчанию здесь могут быть включены <li> элементы. Оно также может быть установлено на родительских элементах <ol> или <ul>.

Свойство list-style-type будет использовано, когда изображение недоступно для показа.
Значение по умолчанию none
Применяется К элементам списка.
Наследуется Да
Анимируемое Нет
Версия CSS1
DOM синтаксис object.style.listStyleImage = "url("image.jpg")";

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      ul {
      list-style-image: none;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства list-style-image</h2>
    <ul>
      <li>Элемент списка 1</li>
      <li>Элемент списка 2</li>
      <li>Элемент списка 3</li>
    </ul>
  </body>
</html>

Пример с исходным url изображения:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      ul {
      list-style-image: url("/uploads/media/default/0001/01/03d3f916bd5c266dd5008d5c210478cc730437eb.png");
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства list-style-image</h2>
    <ul>
      <li>Элемент списка 1</li>
      <li>Элемент списка 2</li>
      <li>Элемент списка 3</li>
    </ul>
  </body>
</html>

Значения

Значение Описание
none Указывает на отсутствие изображения. Вместо изображения будет отображен маркер списка, установленный при помощи list-style-type. Значение по умолчанию.
url Используется, чтобы предоставить исходный url-адрес изображения.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

Поддержка браузера

chrome edge firefox safari opera
1.0+ 12.0+ 1.0+ 1.0+ 7.0+

Практикуйте свои знания

Каково назначение CSS-свойства 'list-style-image'?
Считаете ли это полезным?