Dynamically changing the color of an element li doesn't change the color of the bullet point

Question

In Chrome (Version 45.0.2454.101 m) if I add a class to a list element to change its color, the bullet point color is only updated when the window is repainted (resized)

 $("#a").click(function() { $("#a").addClass('blue'); }); 

 ul li { color: red; list-style-type: disc; margin-left: 2em; } .blue { color: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul> <li id="a">a</li> <li id="b">b</li> <li id="c">c</li> </ul> 

Is it a bug in Chrome that can be solved with code? (or is it a bug at all?)

Answer 1

Probably it is a bug but I would not rely on the standard disc elements.

You could use CSS ::before pseudo-element instead. It is much more configurable and is fully under your control.

 $("#a").click(function() { $("#a").addClass('blue'); }); 

 ul li { color: red; list-style-type: none; margin-left: 2em; } ul li::before { content: "•"; } .blue { color: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul> <li id="a">a</li> <li id="b">b</li> <li id="c">c</li> </ul> 

Answer 2

You could force the repaint using a fake CSS animation until this bug has been fixed.

 $("#a").click(function() { $("#a").addClass('blue'); }); 

 ul li { color: red; list-style-type: disc; margin-left: 2em; -webkit-animation:1ms foo infinite; /* using prefix for webkit only */ } .blue { color: blue; } @-webkit-keyframes foo { /* using prefix for webkit only */ from { zoom: 0.99999; } to { zoom: 1; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul> <li id="a">a</li> <li id="b">b</li> <li id="c">c</li> </ul> 

Alternatively, you could use:

$("#a").addClass('blue').hide().show(0);