Щоб встановити власний малюнок маркера для пунктів списку, скористайтесь стильовою властивістю list-style-image, додаючи його до селектора ul або li. Як значення вказується адреса бажаного зображення (рис. 1).
Приклад 1. Картинка замість маркерів
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Малюнок як маркер</title> <style> ul { list-style-image: url(/example/image/book.png); /* Зображення маркера */
}
</style>
</head>
<body> <ul> <li>Чебурашка</li> <li>Крокодил Гена</li> <li>Шапокляк</li>
</ul>
</body>
</html>Результат цього прикладу показаний на рис. 1.
Мал. 1. Картинка як маркера списку
Врахуйте, що висота малюнка впливає на міжрядкову відстань між пунктами списку, тому підбирайте зображення невеликого розміру.
Використання властивості list-style-image має деякі недоліки. По-перше, не можна зміщувати малюнок щодо його вихідного положення, по-друге, у різних браузерах малюнки іноді виводяться з невеликим зміщенням. Більш гнучкі налаштування має властивість background, яка дозволяє виводити картинку як фоновий малюнок (приклад 2). Його слід додати до селектора li та прибрати відображення вихідних маркерів через властивість list-style зі значенням none.
Приклад 2. Фоновий малюнок
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Малюнок як маркер</title> <style> li { list-style: none; /* Забираємо вихідні маркери */
background: url(/example/image/book.png) no-repeat 0 50%; /* Параметри фону */
padding-left: 24px; /* Зміщуємо текст вправо */
}
</style>
</head>
<body> <ul> <li>Чебурашка</li> <li>Крокодил Гена</li> <li>Шапокляк</li>
</ul>
</body>
</html>Результат цього прикладу показаний на рис. 2.
Мал. 2. Картинка як маркер списку
Щоб текст не накладався на фоновий малюнок до селектора li додана властивість padding-left, значення якого дорівнює ширині картинки плюс бажаний відступ від малюнка до тексту.