Given an unordered lists (UL) of bullets, we need to change the color of the bullets in the list using CSS.
Note: It is not allowed to use any images or span tags.
First of all, there is not direct way in CSS by which we can change the color of the bullets in an unordered list. However, to change the color of the bullets in an unordered list using CSS, we will have to first discard the default list-style and manually define the content that comes before each list item of the list.
This content is the Unicode of the kind of bullet that you want to use for your list. The Unicode characters for different bullet styles are as follows:
Below is a sample CSS code that removes the default style from an Unordered List in HTML and use unicodes:
Below programs illustrate the above approach of changing colours of list item bullets:
- CSS | Colors
- How to define colors as variables in CSS ?
- Materialize CSS | Colors
- How to disable a link using only CSS?
- Set the opacity only to background color not on the text in CSS
- Colors and gradients in bootstrap with examples
- Bootstrap 4 | Colors
- CSS | LISTS
- CSS | :only-of-type Selector
- Targeting only Firefox with CSS
- CSS | :read-only Selector
- CSS | :only-child Selector
- How to create form validation by using only HTML ?
- How to override the CSS properties of a class using another CSS class ?
- How to Set Color of Progress Bar using HTML and CSS ?
- HTML | Lists
- Create pandas dataframe from lists using zip
- Create pandas dataframe from lists using dictionary
- Difference between bootstrap.css and bootstrap-theme.css
- How to move H2 Beneath H1 by using only float property ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.
Improved By : Archana choudhary