Change the bullet color of list

Question

I have a list        lt ul class  listStyle  gt           lt li gt               lt strong gt View   lt  strong gt  blah blah           lt  li gt           lt li gt               lt strong gt Edit   lt  strong gt  blah blah blah           lt  li gt       lt  ul gt    I am using square bullet for list        listStyle          list-style-type  square          Bullets appears in black color  Is it possible change the color of the bullet  If yes  how can i change it   Please help  Thanks

User · Accepted Answer

Example JS Fiddle  Bullets take the color property of the list    listStyle       color  red      Note if you want your list text to be a different colour  you have to wrap it in say  a p  for example    listStyle p       color  black      Example HTML    lt ul class  listStyle  gt       lt li gt           lt p gt  lt strong gt View   lt  strong gt  blah blah  lt  p gt       lt  li gt       lt li gt           lt p gt  lt strong gt View   lt  strong gt  blah blah  lt  p gt       lt  li gt   lt  ul gt

User · Answer

I would recommend you to use background-image instead of default list    listStyle       list-style  none      background  url image path jpg  no-repeat left center      padding-left  30px      width  20px      height  20px      Or  if you don t want to use background-image as bullet  there is an option to do it with pseudo element    liststyle      list-style  none      margin  0      padding  0     liststyle before       content              color  red     or whatever color you prefer        font-size  20px    or whatever the bullet size you prefer

User · Answer

You have to use image   listStyle       list-style  none      background  url bullet jpg  no-repeat left center      padding-left  40px

[css] Change the bullet color of list

Examples related to css