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

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    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

  • Question
    Sign in to vote
    0
    Sign in to vote
    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