Changing an element's color dynamically does not affect the color of the bullet point

Question

Changing an element's color dynamically does not affect the color of the bullet point

When using Chrome (Version 45.0.2454.101 m), I noticed that when I add a class to a list element to change its color, the bullet point color is only updated when the window is resized or repainted.

$("#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>

Do you know if this is a bug in Chrome that can be fixed with code, or if it is not a bug at all?

jquery css google-chrome

Answer 1

Answer №1

Seems like there might be a bug, so it's best not to rely on the standard disc elements.

Instead, consider using the CSS ::before pseudo-element. It offers more customization options and gives you full 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

Seems like there might be a bug, so it's best not to rely on the standard disc elements.

Instead, consider using the CSS ::before pseudo-element. It offers more customization options and gives you full 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 3

Answer №2

To address this issue, one workaround is to trigger a repaint by utilizing a pseudo CSS animation until the bug is resolved.

$("#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>

Another approach would be to execute the following code:

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

Answer 4

To address this issue, one workaround is to trigger a repaint by utilizing a pseudo CSS animation until the bug is resolved.

$("#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>

Another approach would be to execute the following code:

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

Changing an element's color dynamically does not affect the color of the bullet point

Answer №1

Answer №2

Similar questions

Using JQuery to duplicate and assign individual IDs to each clone

Begin your journey with Foundation Navigation as it seamlessly transitions from left to right

What is the best way to include multiple ng-repeats within a single ng-repeat?

What is the process by which JavaScript evaluates the closing parenthesis?

The JQuery sidebar smoothly transitions in after the menu button is pressed

Unable to set height of images using jQuery following an ajax request

Using Bootstrap columns within a PHP while loop

Mastering CSS Sprites: A Guide to Aligning Sprite Buttons at the Bottom

Tips for ensuring my jQuery textarea Focus event does not fire continuously for an endless number of times

Is there a way for me to instruct jQuery to revert an element back to its initial value, prior to any dynamic alterations?

Issue with enlarging images using UL and LI tags persists

Execute the function at intervals of 2 seconds until the variable is altered

Is it possible to adjust the scroll top position using inline style in angularJS/CSS?

Three-column navigation menu featuring visuals

The navigation bar and text subtly shift when displayed on various devices or when the window size is adjusted

What's the best way to stack two input fields vertically and combine them into a single unit?

Struggling with implementing CSS in React even after elevating specificity levels

Following an update, Storybook is failing to apply JSX styles

An efficient method for removing a column using JavaScript

Footer placement not aligning at the bottom using Bootstrap