Custom styling progress bar in CSS

Question

I have a progress bar and i want to style it away from default.

I tried bit of things but it didn't work as I expected.

I want to change the background color and border radius of the progress bar.

When I set the background color, it changes from the default blue to green color and not to the color I set.

<progress class="amount-progress" value="60500" max="120000">70 %</progress>

You can see the fiddle.

When i set the background-color the color changes from blue to green which has to change to a different blue.

And i want the progress bar to have a smooth edge.

I did set border-radius but this also didn't work out.

.amount-progress {
  width: 80%;
  margin-left: -11.5%;
  height: 22px;
  background-color: #0091EA;
}

Answer 1

Note: when you first implement just progress, you might see that weird green grey progress bar but if you implement

progress::-webkit-progress-bar

and

progress::-webkit-progress-value

you will see that the things are starting to work as expected

progress {
accent-color:red;
background-color:tomato;//mozilla

//Get rid of website stylesheet
//Weird green grey progressbar
-webkit-appearence:none;
}

//Set the background color for progress
progress::-webkit-progress-bar 
{background-color:tomato;}

// set the progress value color
progress::-webkit-progress-value 
{background-color:red;}

//set the progress value color for FF
progress::-moz-progress-bar 
{background-color:red;}

Answer 2

You have to work with the kit of HTML5 progress bar.These are currently the entire selectors for styling HTML5 progress bar:

progress {
  /* style rules */
}
progress::-webkit-progress-bar {
  /* style rules */
}
progress::-webkit-progress-value {
  /* style rules */
}
progress::-moz-progress-bar {
  /* style rules */
}

so :

progress {
  border-radius: 7px; 
  width: 80%;
  height: 22px;
  margin-left: -11.5%;
  box-shadow: 1px 1px 4px rgba( 0, 0, 0, 0.2 );
}
progress::-webkit-progress-bar {
  background-color: yellow;
  border-radius: 7px;
}
progress::-webkit-progress-value {
  background-color: blue;
  border-radius: 7px;
  box-shadow: 1px 1px 5px 3px rgba( 255, 0, 0, 0.8 );
}
progress::-moz-progress-bar {
  /* style rules */
}

<progress value="3333" max="10000">33%</progress>

One thing to keep in mind is that there are two types of progress bars: indeterminate and determinate. If you use the above you will be changing the style for both. If you only want to change the style for a determinate bar you can do the below. This is useful if you want to style the indeterminate progress bar different, for example with a rounded spinner or anything like that.

progress {
    display: block;
}

    /* Determinate: */

    progress[value] {
      /* style rules */
    }
    progress[value]::-webkit-progress-bar {
      /* style rules */
    }
    progress[value]::-webkit-progress-value {
      /* style rules */
    }
    progress[value]::-moz-progress-bar {
      /* style rules */
    }

    /* Indeterminate: */

    progress:not([value]) {
      /* style rules */
    }
    progress:not([value])::-webkit-progress-bar {
      /* style rules */
    }
    progress:not([value])::-webkit-progress-value {
      /* style rules */
    }
    progress:not([value])::-moz-progress-bar {
      /* style rules */
    }

<p>Determinate:</p>

<progress value="66" max="100">Determinate</progress>

<p>Indeterminate:</p>

<progress>Indeterminate</progress>