css властивість list-style-image

Властивість list-style-image замінює мітку списку на зображення.

Властивість list-style-image можна використовувати в будь-якому елементі списку. Елемент списку - це будь-який елемент, у якого display встановлено як list-item або inline-list-item, який є нащадком елементів <ol> i <ul>.

правити

Порада

Завжди вказуйте властивість list-style-type. Ця властивість буде використана, якщо зображення недоступне.

автор: Svitlana правити

Нотатка

Ця властивість перевизначає властивість list-style-type.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

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

Властивість list-style-image може отримувати 4 значень:

none

Відміняє зображення в якості маркера для батьківського елемента. Вигляд мітки буде заданий без задання.

автор: Svitlana

правити

url

Відносний або абсолютний шлях до графічного файлу. Значення можна вказувати в одинарних, подвійних лапках або без них.

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента.

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
list-style-image	1.0	1.0	1.0	7.0	12.0	8.0

Підтримка: мобільні переглядачі

Переглядач
list-style-image	1.0	1.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<ul>
    <li>перший пункт</li>
    <li>другий пункт</li>
</ul>

ul {
    list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Crect width='10' height='10' fill='%23803ab3'/%3E%3C/svg%3E");
}