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

Свойство CSS list-style-image заменяет стандартный маркер элемента списка (диск, круг или номер) изображением на ваш выбор. Это самый простой способ задать пользовательские маркеры для <ol> или <ul> — галочку, стрелку, иконку — без добавления лишней разметки.

На этой странице рассматривается, что делает свойство, какие значения оно принимает, как определяется размер маркера, распространённые проблемы и как оно вписывается в сокращённое свойство list-style.

Когда использовать

Используйте list-style-image, когда нужны декоративные маркеры из одного небольшого изображения и не требуется точный контроль над размером или отступами маркера. Если нужен точный контроль (размер, отступ, выравнивание), современный подход — псевдоэлемент ::marker или background-image на каждом <li> с padding-left: list-style-image не позволяет изменить размер изображения, поэтому слишком крупная графика будет доминировать в строке.

Как определяется размер маркера

Если изображение имеет собственную ширину и высоту, они используются напрямую в качестве размера маркера. Если у изображения есть соотношение сторон и только одно из измерений, недостающее вычисляется из соотношения. Поскольку CSS не позволяет масштабировать маркер, подготовьте изображение в том размере, в котором оно должно отображаться (обычно 16×16 или меньше).

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

Информация

Если изображение не загрузилось, маркер возвращается к значению list-style-type (по умолчанию — диск). Всегда задавайте разумный list-style-type, чтобы сломанные изображения не оставили список без маркеров.

Начальное значение	none
Применяется к	Элементам списка.
Наследуется	Да.
Анимируется	Нет.
Версия	CSS1
DOM Syntax	object.style.listStyleImage = 'url("image.jpg")';

Синтаксис

Синтаксис свойства CSS list-style-image

list-style-image: none | <url> | image-set() | initial | inherit;

Пример свойства list-style-image:

Пример свойства CSS list-style-image со значением none

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul {
        list-style-image: none;
      }
    </style>
  </head>
  <body>
    <h2>List-style-image property example</h2>
    <ul>
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
  </body>
</html>

Попробуйте сами »

Результат

![Свойство CSS list-style-image](/uploads/media/default/0001/04/3253cd4b1e6f2bdbce6333da58573f6d8a9a0d53.png "CSS list-style-image none result" =420x)

Пример свойства list-style-image с указанием URL-адреса источника изображения:

Пример свойства CSS list-style-image

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul {
        list-style-image: url("/uploads/media/default/0001/01/03d3f916bd5c266dd5008d5c210478cc730437eb.png");
      }
    </style>
  </head>
  <body>
    <h2>List-style-image property example</h2>
    <ul>
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
  </body>
</html>

Попробуйте сами »

Использование сокращённого свойства list-style

На практике изображение обычно задаётся вместе с типом и позицией маркера через сокращённое свойство list-style. Два правила ниже равнозначны:

/* Longhand */
ul {
  list-style-type: square;
  list-style-position: inside;
  list-style-image: url("arrow.png");
}

/* Shorthand — type, position, image in any order */
ul {
  list-style: square inside url("arrow.png");
}

Здесь square — это резервный маркер, который используется пока изображение загружается или если оно недоступно. Смотрите list-style-position для понимания разницы между inside и outside.

Значения

Значение	Описание	Попробовать
`none`	Изображение не отображается. Вместо него используется маркер, заданный list-style-type. Это значение по умолчанию.	Попробовать »
`<url>`	URL-адрес источника изображения для использования в качестве маркера элемента списка, записывается как `url("path/to/image.png")`.	Попробовать »
`image-set()`	Набор вариантов изображений, из которых браузер выбирает в зависимости от среды рендеринга, например разрешения экрана. Позволяет показывать более чёткое изображение на экранах с высокой плотностью пикселей.	Попробовать »
`initial`	Сбрасывает свойство до значения по умолчанию (`none`).	Попробовать »
`inherit`	Наследует значение от родительского элемента.

Поддержка браузерами и доступность

list-style-image поддерживается во всех современных браузерах (существует начиная с CSS1). Следует помнить о двух вещах:

Изображение является чисто декоративным — программы чтения с экрана не объявляют его, и для него нет текста alt. Не вкладывайте смысл в маркер, если он не дублируется в тексте списка.
Цвет маркера следует цвету color текста для list-style-type, однако изображение сохраняет собственные цвета. Если нужно, чтобы маркер соответствовал цвету текста, используйте ::marker или подход с background-image.

Практика

Какова функция свойства 'list-style-image' в CSS?

Позволяет задать изображение в качестве маркера-буллита для списков.Позволяет изменить цвет элементов списка.Управляет размером элементов списка.Используется для указания изображения в качестве маркера элемента списка.