- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Change Bullet Color for Lists with ::marker CSS Selector
Syntax
The syntax of CSS ::marker selector is as follows −
Selector::marker { attribute: /*value*/; }
Example
The following examples illustrate CSS ::marker selector.
<!DOCTYPE html> <html> <head> <style> ul { list-style: circle; font-size: 1.2em; } li::marker { color: green; } </style> </head> <body> <h2><strong>TMNT</strong></h2> <ul> <li>Raphael</li> <li>Donatello</li> <li>Michaelangelo</li> <li>Leonardo</li> </ul> </body> </html>
This gives the following output
Example
<!DOCTYPE html> <html> <head> <style> ul { list-style: square; overflow: hidden; } li::marker { color: green; } li { width: 15%; margin: 2%; float: left; box-shadow: inset 2px 0px 10px lightblue; } </style> </head> <body> <ul> <li>ting</li> <li>tong</li> <li>ding</li> <li>dong</li> </ul> </body> </html>
This gives the following output
- Related Articles
- How to change bullet colors for lists with CSS?
- Set marker inside of the box containing the bullet points with CSS
- Set marker outside of the box containing the bullet points with CSS
- Change Cursor Color with CSS caret-color
- Set image for bullet style with CSS
- Change the color of right border with CSS
- Change the Color of Active Links with CSS
- Change the color of top border with CSS
- How to Change Placeholder Color for Textboxes in CSS
- Change the color of the bottom border with CSS
- Change the color of the left border with CSS
- Change the background color of a button with CSS
- How to indicate whether the marker should appear inside or outside of the box containing the bullet points with CSS?
- How to change the color of active links with CSS
- How to change the color of focused links with CSS

Advertisements