CSS-свойство list-style-image устанавливает изображение, используемое в качестве маркера списка.
Чаще, удобнее использовать общее свойство list-style.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Примечание: Это свойство применяется к элементам списка, т.е. к элементам с 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 type | discrete |
| Канонический порядок | уникальный неоднозначный порядок, определённый формальной грамматикой |
Поддержка браузерами
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
| Компьютеры | Мобильные | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
list-style-image | Chrome Полная поддержка 1 | Edge Полная поддержка 12 | Firefox Полная поддержка 1 | IE Полная поддержка 4 | Opera Полная поддержка 7 | Safari Полная поддержка 1 | WebView Android Полная поддержка 1 | Chrome Android Полная поддержка 18 | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка 10.1 | Safari iOS Полная поддержка 1 | Samsung Internet Android Полная поддержка Да |
Легенда
- Полная поддержка
- Полная поддержка