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 значень:

url

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

автор: Svitlana

правити

none

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

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

Переглядачі

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

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

Переглядач
	1	1	1	7	12	4

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

Переглядач
	4.4	18	4	1

Приклади

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

<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");
}

<p>Встав адресу зображення:</p>

<input type="text" placeholder="url" id="field"></input>

<ul id="block">
  <li>Це елемент один</li>
  <li>Це елемент два</li>
  <li>Це елемент три</li>
</ul>

body {
	padding: 36px;
  text-align: center;
  line-height: 1.45;
  font-size: 20px;
  font-family: sans-serif;
}

#field {
  padding: 8px;
  font-size: 20px;
}

#block {
  text-align: left;
}

var block = document.getElementById('block');

document.getElementById('field').onchange = function () {
  block.style.listStyleImage = 'url("' + this.value + '")';
};
//# sourceURL=pen.js

<ul>
  <li>Це елемент один</li>
  <li>Це елемент два</li>
  <li>Це елемент три</li>
</ul>

ul { 
  list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='9' fill='%23e76f51'/%3E%3C/svg%3E");
  font-size: 2em;
  color: #666; 
}

<p class="label">list-style-image, файл 16×16</p>
<ul class="a">
  <li>Перший пункт</li>
  <li>Другий пункт</li>
</ul>

<p class="label">list-style-image, файл 48×48 — рядки розсунуло</p>
<ul class="b">
  <li>Перший пункт</li>
  <li>Другий пункт</li>
</ul>

<p class="label">фон на li: розмір і відступ керовані</p>
<ul class="c">
  <li>Перший пункт</li>
  <li>Другий пункт</li>
</ul>

body {
    font-family: sans-serif;
    font-size: 15px;
    line-height: 1.5;
    padding: 12px;
}

.label {
    font-family: monospace;
    font-size: 12px;
    color: #666;
    margin: 16px 0 4px;
}

.a {
    list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='6' fill='%230172ad'/%3E%3C/svg%3E");
}

.b {
    list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Ccircle cx='24' cy='24' r='20' fill='%230172ad'/%3E%3C/svg%3E");
}

.c {
    list-style: none;
    padding-left: 0;
}

.c li {
    padding-left: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Ccircle cx='24' cy='24' r='20' fill='%230172ad'/%3E%3C/svg%3E") left center / 14px 14px no-repeat;
}