HTML / CSS 3: Progress bar example

I've been working with the progress element and trying to get it to look nice across different browsers. It doesn't help that most of the styling elements are pseudo elements.

Here's the MDN page on the progress element.

The big issue I ran into was trying to style the element for Chrome and Firefox.
Chrome uses the following styles to change the look of the element:

progress::-webkit-progress-bar
This will style the background of the progress bar.

progress::-webkit-progress-value
This will style the growing value inside of the progress bar.

Firefox uses the following value:
progress::-moz-progress-value
This will only let you style the growing value inside of the progress bar. You can't style the background.

The other catch is you can't combine the values in your css. For example this won't work

progress::-moz-progress-value,
progress::-webkit-progress-value{

}

None of your styles will take and the bar will fall back to it's unstyled default.

Here's the html I was playing with.
Here's a link to a jsFiddle of the following code

/* http://www.hongkiat.com/blog/html5-progress-bar/ */
.progress-bar{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Can't share styles. Chome gets angry */
/* FF style the progress bar */
.progress-bar::-moz-progress-value{
    background: #3399ff;
    border-radius: 12px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}

/* Chrome style the background of the progress bar */
.progress-bar::-webkit-progress-bar{
    background: silver;
    border-radius: 12px;
}

/* Chrome style the progress value */
.progress-bar::-webkit-progress-value{
    background: #3399ff;
    border-radius: 12px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}