Change the color of a bullet in a html list

Question

All I want is to be able to change the color of a bullet in a list to a light gray  It defaults to black  and I can t figure out how to change it   I know I could just use an image  I d rather not do that if I can help it

User · Answer

For a 2008 question  I thought I might add a more recent and up-to-date answer on how you could go about changing the colour of bullets in a list   If you are willing to use external libraries  Font Awesome gives you scalable vector icons  and when combined with Bootstrap s helper classes  eg  text-success   you can make some pretty cool and customisable lists   I have expanded on the extract from the Font Awesome list examples page below      Use fa-ul and fa-li to easily replace default bullets in unordered lists     x000D   x000D   lt link href  https   maxcdn bootstrapcdn com font-awesome 4 5 0 css font-awesome min css  rel  stylesheet    gt  x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 6 css bootstrap min css  rel  stylesheet    gt  x000D   x000D   lt ul class  fa-ul  gt  x000D     lt li gt  lt i class  fa-li fa fa-circle  gt  lt  i gt List icons lt  li gt  x000D     lt li gt  lt i class  fa-li fa fa-check-square text-success  gt  lt  i gt can be used lt  li gt  x000D     lt li gt  lt i class  fa-li fa fa-spinner fa-spin text-primary  gt  lt  i gt as bullets lt  li gt  x000D     lt li gt  lt i class  fa-li fa fa-square text-danger  gt  lt  i gt in lists lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    Font Awesome  mostly  supports IE8  and only supports IE7 if you use the older version 3 2 1

User · Answer

Just do a bullet in a graphics program and use list-style-image   ul     list-style-image url  gray-bullet gif

User · Answer

The bullet gets its color from the text   So if you want to have a different color bullet than text in your list you ll have to add some markup   Wrap the list text in a span    lt ul gt     lt li gt  lt span gt item  1 lt  span gt  lt  li gt     lt li gt  lt span gt item  2 lt  span gt  lt  li gt     lt li gt  lt span gt item  3 lt  span gt  lt  li gt   lt  ul gt    Then modify your style rules slightly   li     color  red     bullet color      li span     color  black     text color

User · Answer

lt ul gt   lt li style  color  ddd   gt  lt span style  color  000   gt List Item lt  span gt  lt  li gt   lt  ul gt

User · Answer

Just use CSS    lt li style  color  e0e0e0  gt something lt  li gt

User · Answer

lt ul style  color  red   gt   lt li gt One lt  li gt   lt li gt Two lt  li gt   lt li gt Three lt  li gt   lt  ul gt     One Two Three

User · Answer

You could use CSS to attain this   By specifying the list in the color and style of your choice  you can then also specify the text as a different color   Follow the example at http   www echoecho com csslists htm

User · Answer

Wrap the text within the list item with a span  or some other element  and apply the bullet color to the list item and the text color to the span

User · Answer

The bullet gets its color from the text   So if you want to have a different color bullet than text in your list you ll have to add some markup   Wrap the list text in a span    lt ul gt     lt li gt  lt span gt item  1 lt  span gt  lt  li gt     lt li gt  lt span gt item  2 lt  span gt  lt  li gt     lt li gt  lt span gt item  3 lt  span gt  lt  li gt   lt  ul gt    Then modify your style rules slightly   li     color  red     bullet color      li span     color  black     text color

User · Answer

lt ul gt     lt li style  color   888   gt  lt span style  color   000  gt test lt  span gt  lt  li gt   lt  ul gt    the big problem with this method is the extra markup   the span tag

User · Answer

You can use Jquery if you have lots of pages and don t need to go and edit the markup your self   here is a simple example      li   each function    var content     this  html    var myDiv       lt div   gt    myDiv css  color    red      color of text  myDiv html content     this  html myDiv  css  color    yellow      color of bullet

User · Answer

lt ul gt   lt li style  color  ddd   gt  lt span style  color  000   gt List Item lt  span gt  lt  li gt   lt  ul gt

User · Answer

The bullet gets its color from the text   So if you want to have a different color bullet than text in your list you ll have to add some markup   Wrap the list text in a span    lt ul gt     lt li gt  lt span gt item  1 lt  span gt  lt  li gt     lt li gt  lt span gt item  2 lt  span gt  lt  li gt     lt li gt  lt span gt item  3 lt  span gt  lt  li gt   lt  ul gt    Then modify your style rules slightly   li     color  red     bullet color      li span     color  black     text color

User · Answer

Wrap the text within the list item with a span  or some other element  and apply the bullet color to the list item and the text color to the span

User · Answer

You could use CSS to attain this   By specifying the list in the color and style of your choice  you can then also specify the text as a different color   Follow the example at http   www echoecho com csslists htm

User · Answer

For a 2008 question  I thought I might add a more recent and up-to-date answer on how you could go about changing the colour of bullets in a list   If you are willing to use external libraries  Font Awesome gives you scalable vector icons  and when combined with Bootstrap s helper classes  eg  text-success   you can make some pretty cool and customisable lists   I have expanded on the extract from the Font Awesome list examples page below      Use fa-ul and fa-li to easily replace default bullets in unordered lists     x000D   x000D   lt link href  https   maxcdn bootstrapcdn com font-awesome 4 5 0 css font-awesome min css  rel  stylesheet    gt  x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 6 css bootstrap min css  rel  stylesheet    gt  x000D   x000D   lt ul class  fa-ul  gt  x000D     lt li gt  lt i class  fa-li fa fa-circle  gt  lt  i gt List icons lt  li gt  x000D     lt li gt  lt i class  fa-li fa fa-check-square text-success  gt  lt  i gt can be used lt  li gt  x000D     lt li gt  lt i class  fa-li fa fa-spinner fa-spin text-primary  gt  lt  i gt as bullets lt  li gt  x000D     lt li gt  lt i class  fa-li fa fa-square text-danger  gt  lt  i gt in lists lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    Font Awesome  mostly  supports IE8  and only supports IE7 if you use the older version 3 2 1

User · Answer

Wrap the text within the list item with a span  or some other element  and apply the bullet color to the list item and the text color to the span

User · Answer

lt ul gt   lt li style  color  ddd   gt  lt span style  color  000   gt List Item lt  span gt  lt  li gt   lt  ul gt

User · Answer

Just use CSS    lt li style  color  e0e0e0  gt something lt  li gt

User · Answer

Wrap the text within the list item with a span  or some other element  and apply the bullet color to the list item and the text color to the span

User · Answer

You ll want to set a  list-style  via CSS  and give it a color  value   Example   ul colored  list-style  color  green

User · Answer

lt ul gt   lt li style  color  ddd   gt  lt span style  color  000   gt List Item lt  span gt  lt  li gt   lt  ul gt

User · Answer

lt ul gt     lt li style  color   888   gt  lt span style  color   000  gt test lt  span gt  lt  li gt   lt  ul gt    the big problem with this method is the extra markup   the span tag

User · Answer

As per W3C spec       The list properties     do not allow authors to specify distinct style  colors  fonts  alignment  etc   for the list marker       But the idea with a span inside the list above should work fine

User · Answer

You can use Jquery if you have lots of pages and don t need to go and edit the markup your self   here is a simple example      li   each function    var content     this  html    var myDiv       lt div   gt    myDiv css  color    red      color of text  myDiv html content     this  html myDiv  css  color    yellow      color of bullet

User · Answer

As per W3C spec       The list properties     do not allow authors to specify distinct style  colors  fonts  alignment  etc   for the list marker       But the idea with a span inside the list above should work fine

User · Answer

Hello maybe this answer is late but is the correct one to achieve this   Ok the fact is that you must specify an internal tag to make the LIst text be on the usual black  or what ever you want to get it   But is also true that you can REDEFINE any TAGS and internal tags with CSS  So the best way to do this use a SHORTER tag for the redefinition  Usign this CSS definition   li   color  red    li b   color  black  font weight  normal     c1   color  red     c2   color  blue     c3   color  green      And this html code    lt ul gt   lt li gt  lt b gt Text 1 lt  b gt  lt  li gt   lt li gt  lt b gt Text 2 lt  b gt  lt  li gt   lt li gt  lt b gt Text 3 lt  b gt  lt  li gt   lt  ul gt    You get required result  Also you can make each disc diferent color    lt ul gt       lt li class  c1  gt  lt b gt Text 1 lt  b gt  lt  li gt       lt li class  c2  gt  lt b gt Text 2 lt  b gt  lt  li gt       lt li class  c3  gt  lt b gt Text 3 lt  b gt  lt  li gt    lt  ul gt

User · Answer

You could use CSS to attain this   By specifying the list in the color and style of your choice  you can then also specify the text as a different color   Follow the example at http   www echoecho com csslists htm

User · Answer

I managed this without adding markup  but instead using li before  This obviously has all the limitations of  before  no old IE support   but it seems to work with IE8  Firefox and Chrome after some very limited testing  It s working in our controller environment  wondering if anyone could check this  The bullet style is also limited by what s in unicode    lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01 Transitional  EN   http   www w3 org TR html4 loose dtd  gt   lt html gt   lt head gt     lt style type  text css  gt      li         list-style  none             li before            For a round bullet          content   2022            For a square bullet            content   25A0           display  block        position  relative        max-width  0px        max-height  0px        left  -10px        top  -0px        color  green        font-size  20px           lt  style gt   lt  head gt    lt body gt     lt ul gt       lt li gt foo lt  li gt       lt li gt bar lt  li gt     lt  ul gt   lt  body gt   lt  html gt

User · Answer

I managed this without adding markup  but instead using li before  This obviously has all the limitations of  before  no old IE support   but it seems to work with IE8  Firefox and Chrome after some very limited testing  It s working in our controller environment  wondering if anyone could check this  The bullet style is also limited by what s in unicode    lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01 Transitional  EN   http   www w3 org TR html4 loose dtd  gt   lt html gt   lt head gt     lt style type  text css  gt      li         list-style  none             li before            For a round bullet          content   2022            For a square bullet            content   25A0           display  block        position  relative        max-width  0px        max-height  0px        left  -10px        top  -0px        color  green        font-size  20px           lt  style gt   lt  head gt    lt body gt     lt ul gt       lt li gt foo lt  li gt       lt li gt bar lt  li gt     lt  ul gt   lt  body gt   lt  html gt

User · Answer

You could use CSS to attain this   By specifying the list in the color and style of your choice  you can then also specify the text as a different color   Follow the example at http   www echoecho com csslists htm

User · Answer

It works as well if we set color for each elements for example  I added some Margin to left now    lt article class  event-item  gt       lt p gt Black text here lt  p gt   lt  article gt    event-item      list-style-type  disc      display  list-item      color   ff6f9a       margin-left  25px     event-item p       margin  0      color  initial

User · Answer

It works as well if we set color for each elements for example  I added some Margin to left now    lt article class  event-item  gt       lt p gt Black text here lt  p gt   lt  article gt    event-item      list-style-type  disc      display  list-item      color   ff6f9a       margin-left  25px     event-item p       margin  0      color  initial

User · Answer

You ll want to set a  list-style  via CSS  and give it a color  value   Example   ul colored  list-style  color  green

User · Answer

Just use CSS    lt li style  color  e0e0e0  gt something lt  li gt

User · Answer

The bullet gets its color from the text   So if you want to have a different color bullet than text in your list you ll have to add some markup   Wrap the list text in a span    lt ul gt     lt li gt  lt span gt item  1 lt  span gt  lt  li gt     lt li gt  lt span gt item  2 lt  span gt  lt  li gt     lt li gt  lt span gt item  3 lt  span gt  lt  li gt   lt  ul gt    Then modify your style rules slightly   li     color  red     bullet color      li span     color  black     text color

User · Answer

lt ul style  color  red   gt   lt li gt One lt  li gt   lt li gt Two lt  li gt   lt li gt Three lt  li gt   lt  ul gt     One Two Three

User · Answer

lt ul gt     lt li style  color   888   gt  lt span style  color   000  gt test lt  span gt  lt  li gt   lt  ul gt    the big problem with this method is the extra markup   the span tag

User · Answer

Just do a bullet in a graphics program and use list-style-image   ul     list-style-image url  gray-bullet gif

User · Answer

As per W3C spec       The list properties     do not allow authors to specify distinct style  colors  fonts  alignment  etc   for the list marker       But the idea with a span inside the list above should work fine

User · Answer

This was impossible in 2008  but it s becoming possible soon  hopefully    According to The W3C CSS3 specification  you can have full control over any number  glyph  or other symbol generated before a list item with the   marker pseudo-element  To apply this to the most voted answer s solution    lt ul gt     lt li gt item  1 lt  li gt     lt li gt item  2 lt  li gt     lt li gt item  3 lt  li gt   lt  ul gt   li  marker     color  red     bullet color      li     color  black    text color        JSFiddle Example  Note  though  that as of July 2016  this solution is only a part of the W3C Working Draft and does not work in any major browsers  yet   If you want this feature  do these    Blink  Chrome  Opera  Vivaldi  Yandex  etc    star Chromium s issue Gecko  Firefox  Iceweasel  etc    Click   vote   on this bug Trident  IE  Windows web views   Click  I can too  under  X User s  can reproduce this bug Trident development has ceased EdgeHTML  MS Edge  Windows web views  Windows Modern apps   Click  Vote  on this prpopsal Webkit  Safari  Steam  WebOS  etc    CC yourself to this bug

User · Answer

lt ul gt     lt li style  color   888   gt  lt span style  color   000  gt test lt  span gt  lt  li gt   lt  ul gt    the big problem with this method is the extra markup   the span tag

User · Answer

Hello maybe this answer is late but is the correct one to achieve this   Ok the fact is that you must specify an internal tag to make the LIst text be on the usual black  or what ever you want to get it   But is also true that you can REDEFINE any TAGS and internal tags with CSS  So the best way to do this use a SHORTER tag for the redefinition  Usign this CSS definition   li   color  red    li b   color  black  font weight  normal     c1   color  red     c2   color  blue     c3   color  green      And this html code    lt ul gt   lt li gt  lt b gt Text 1 lt  b gt  lt  li gt   lt li gt  lt b gt Text 2 lt  b gt  lt  li gt   lt li gt  lt b gt Text 3 lt  b gt  lt  li gt   lt  ul gt    You get required result  Also you can make each disc diferent color    lt ul gt       lt li class  c1  gt  lt b gt Text 1 lt  b gt  lt  li gt       lt li class  c2  gt  lt b gt Text 2 lt  b gt  lt  li gt       lt li class  c3  gt  lt b gt Text 3 lt  b gt  lt  li gt    lt  ul gt

User · Answer

lt ul style  color  red   gt   lt li gt One lt  li gt   lt li gt Two lt  li gt   lt li gt Three lt  li gt   lt  ul gt     One Two Three

User · Answer

lt ul style  color  red   gt   lt li gt One lt  li gt   lt li gt Two lt  li gt   lt li gt Three lt  li gt   lt  ul gt     One Two Three

User · Answer

As per W3C spec       The list properties     do not allow authors to specify distinct style  colors  fonts  alignment  etc   for the list marker       But the idea with a span inside the list above should work fine

User · Answer

You ll want to set a  list-style  via CSS  and give it a color  value   Example   ul colored  list-style  color  green

User · Answer

Just use CSS    lt li style  color  e0e0e0  gt something lt  li gt

User · Answer

This was impossible in 2008  but it s becoming possible soon  hopefully    According to The W3C CSS3 specification  you can have full control over any number  glyph  or other symbol generated before a list item with the   marker pseudo-element  To apply this to the most voted answer s solution    lt ul gt     lt li gt item  1 lt  li gt     lt li gt item  2 lt  li gt     lt li gt item  3 lt  li gt   lt  ul gt   li  marker     color  red     bullet color      li     color  black    text color        JSFiddle Example  Note  though  that as of July 2016  this solution is only a part of the W3C Working Draft and does not work in any major browsers  yet   If you want this feature  do these    Blink  Chrome  Opera  Vivaldi  Yandex  etc    star Chromium s issue Gecko  Firefox  Iceweasel  etc    Click   vote   on this bug Trident  IE  Windows web views   Click  I can too  under  X User s  can reproduce this bug Trident development has ceased EdgeHTML  MS Edge  Windows web views  Windows Modern apps   Click  Vote  on this prpopsal Webkit  Safari  Steam  WebOS  etc    CC yourself to this bug

User · Answer

You ll want to set a  list-style  via CSS  and give it a color  value   Example   ul colored  list-style  color  green

[html] Change the color of a bullet in a html list?

Examples related to html

Examples related to css

Examples related to html-lists