การใช้ภาพเป็นตัวหมายเลขรายการใน CSS (list-style-image)

เพื่อใช้ภาพเป็นตัวหมายเลขรายการ ให้ใช้คุณสมบัติ list-style-image ใน CSS

ตัวอย่าง: ใช้ภาพ Swift เป็น marker สำหรับ ul และ ol

<!DOCTYPE html> <html> <head> <style> ul.demo1 {    list-style-image: url('https://www.tutorialspoint.com/images/Swift.png'); } ol.demo2 {    list-style-image: url('https://www.tutorialspoint.com/images/Swift.png'); } </style> </head> <body> <h2>Teams</h2> <ul class="demo1"> <li>India - Qualified for WordCup</li> <li>Australia - Qualified for WordCup</li> <li>England - Qualified for WordCup</li> </ul> <h2>Players</h2> <ol class="demo2"> <li>Virat Kohli</li> <li>David Warner</li> <li>Steve Smith</li> </ol> </body> </html>

ผลลัพธ์

ไวยากรณ์ (Syntax)

list-style-image: none | url('path/to/image') | initial | inherit;

ข้อดีและข้อจำกัด

วิธีที่ดีกว่า: ใช้ ::marker หรือ background-image

/**** วิธีสมัยใหม่: ::marker (CSS3) ****/
li::marker {
  content: url('icon.svg');
  font-size: 1.2em; /* ปรับขนาดได้ */
}

/**** วิธีคลาสสิก: background-image ****/
li {
  list-style: none;
  padding-left: 30px;
  background: url('icon.svg') no-repeat left center / 20px;
}

หมายเหตุ: ::marker รองรับในเบราว์เซอร์ใหม่ (Chrome 86+, Firefox 68+, Safari 11.1+) ให้ควบคุม marker ได้ละเอียดกว่า