Progress bar colour not working on device

ionic-v1
1

Hi.

I am trying to use the <progress> element in ionic using css. It works fine while testing in browser. But the same doesn’t work when testing on an android device.

progress {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width:100%;
}

progress[value] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

progress:not([value]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

progress[value], progress[value]::-webkit-progress-bar {
    background: #EEE;
    border-radius: 10px;
    height: 10px;
}

progress[value], progress[value]::-webkit-progress-value {
    border-radius: 6px;
    background-color: blue;
}

.different progress[value], .different progress[value]::-webkit-progress-value {
    background-color: red;
}

The <progress> elements appear blue. But the ones that I want to appear ‘different’ using the .different class don’t appear in red but in blue. This only happens when testing on device. I have tested it on an android device only. How do I resolve this?

Thanks

Update

I fixed this by using the following CSS

progress.different, progress.different::-webkit-progress-value {
    background-color: red;
}
2

Have you tried using !important keyword?

4

Yes, I have and it didn’t change anything (on device) so I moved back to the code that I have posted.

I have even tried the following

<progress id="different" value="70" max="100"></progress>

With the following CSS

#different {
    background-color:red  !important;
}

I also tried the following

<progress value="40" max="100" style="background-color: red !important;"></progress>