list-style-image

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

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

Интерактивный пример

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

Синтаксис

css
/* Ключевые слова */
list-style-image: none;

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

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

Значения

<url>

Расположение элемента для использования в качестве маркера.

none

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

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

list-style-image = 
<image> |
none

<image> =
<url> |
<gradient>

<url> =
<url()> |
<src()>

<url()> =
url( <string> <url-modifier>* ) |
<url-token>

<src()> =
src( <string> <url-modifier>* )

Пример

HTML

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

CSS

css
ul {
  list-style-image: url("star-solid.gif");
}

Результат

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

Specification
CSS Lists and Counters Module Level 3
# image-markers
Начальное значениеnone
Применяется ксписок элементов
Наследуетсяда
Обработка значенияThe keyword none or the computed <image>
Animation typediscrete

Совместимость с браузерами

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
list-style-image
none

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

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