list-style-image

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

Чаще, удобнее использовать общее свойство list-style.

Примечание: Это свойство применяется к элементам списка, т.е. к элементам с display: list-item; по умолчанию оно включает элементы <li>. Т.к. это свойство наследуется, его можно задать для родительского элемента (обычно <ol> или <ul>), что позволит применить его ко всем элементам списка.

Синтаксис

/* Значение ключевым словом */
list-style-image: none;

/* <url> значения */
list-style-image: url('starsolid.gif');

/* Глобальные значения */
list-style-image: inherit;
list-style-image: initial;
list-style-image: unset;

Значения

<url>
Расположение элемента для использования в качестве маркера.
none
Указывает, что изображение не используется в качестве маркера списка. Если установлено это значение, вместо него будет использоваться маркер, определенный в list-style-type.

Формальный синтаксис

<url> | none

Пример

HTML

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

CSS

ul {
  list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif");
}

Результат

Спецификации

Спецификация Статус Комментарий
CSS Lists Module Level 3
Определение 'list-style-image' в этой спецификации.
Рабочий черновик Расширяет поддержку любого типа данных <image>.
CSS Level 2 (Revision 1)
Определение 'list-style-image' в этой спецификации.
Рекомендация Первое определение
Начальное значениеnone
Применяется ксписок элементов
Наследуетсяда
Отображениевизуальный
Обработка значенияnone или изображение с абсолютным URI
Animation typediscrete
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
list-style-imageChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 4Opera Полная поддержка 7Safari Полная поддержка 1WebView Android Полная поддержка 1Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 10.1Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка

Смотрите также