locked
How can I change color for HTML5 progress bar control for Chrome RRS feed

  • Question

  • User1256154619 posted

    I have an HTML5 progress bar. I am trying to change its color to blue. The color changes in IE but not in Chrome.

    I did look in other forums, coped styles from there but so far the progress color doesn't change. How should update my CSS to change progress bar color for Chrome?

    /* IE10 */
    progress {
        color: blue;
        border: solid 1pt gray;
        width: 300pt;
        height: 20px;
    }
    
    /* Firefox */
    progress::-moz-progress-bar {
        background: blue;
        border: solid 1pt gray;
        width: 300pt;
        height: 20px;
    }
    
    /* Chrome */
    progress::-webkit-progress-value {
        background: blue;
        border: solid 1pt gray;
        width: 300pt;
        height: 20px;
    }
    
    /* Polyfill */
    progress[aria-valuenow]:before {
        background: blue;
        border: solid 1pt gray;
        width: 300pt;
        height: 20px;
    }
    
    progress {
        -webkit-appearance: none;
        appearance: none;
    }
    
    progress::-webkit-progress-bar {
        background-color: blue;
    }
    
    progress[value] {
        -webkit-appearance: none;
        appearance: none;
    }
    
    progress[value]::-webkit-progress-value {
        border-radius: 2px;
        background-size: 35px 20px, 100% 100%, 100% 100%;
    }
    Monday, July 29, 2019 3:26 PM

Answers

  • User288213138 posted

    Hi mpodolski,

    I suggest you take a look at what these pseudo-elements mean.

    The ::-moz-progress-bar represents the progress bar inside a <progress> element.

    The ::-webkit-progress-bar represents the entire bar of a <progress> element. Normally it's only visible as the unfilled portion of the bar, since by default it's rendered below the ::-webkit-progress-value pseudo-element. It is a child of the ::-webkit-progress-inner-element pseudo-element and the parent of the ::-webkit-progress-value pseudo-element.

    The ::-webkit-progress-value  represents the filled-in portion of the bar of a <progress> element. It is a child of the ::-webkit-progress-bar pseudo-element.

    Note: for ::-webkit-progress-value and ::-webkit-progress-bar  to take effect, appearance needs to be set to none on the <progress> element.

    And you can change the color for process bar as below code:

    <div>
                <progress min="0" max="100" value="63" />
            </div>
    
    
    <style>
            progress {
      border: none;
      width: 400px;
      height: 60px;
      background: crimson;
    }
    
    progress {
      color: lightblue;
    }
    
    progress::-webkit-progress-value {
      background: lightblue;
    }
    
    progress::-moz-progress-bar {
      background: lightcolor;
    }
    
    progress::-webkit-progress-value {
      background: red;
    }
    
    progress::-webkit-progress-bar {
      background: blue;
    }
        </style>

    Best regards,

    Sam

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 30, 2019 5:22 AM