HTML5 Progress Bar Styling

Styling of HTML5 progress bar

/**
 * html5 progress bar styling
 */
html{
	background: #f06;
	background: linear-gradient(45deg, #f33, #a33);
	min-height:100%;
}
 
/* remove standard styling 
 * for all HTML5 progress enabled browsers
 */
 
progress
{
	/* turn of styling */
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
 
	/* no default border in FF and Opera */
	border: none;
 
	/* Dimensions */
	width: 400px;
	height: 50px;
}
 
/* Firefox  */ 
progress  {
   background: #fee;
   border:1px solid #333;
}
progress::-moz-progress-bar {
    background: bada55;
}
progress:not([value])::-moz-progress-bar {
  background:#fdd;
}
 
/* Chrome */
progress::-webkit-progress-bar {
    background: #fee;
}
progress::-webkit-progress-value {
    background: #bada55;
}
progress:not([value])::-webkit-progress-bar {
  background:#fdd;
}
<!-- Styled progress bar -->
<progress max="100" value="70">
  <strong>Total progress: <span>70</span>% done.</strong>
</progress>
{"view":"split-vertical","prefixfree":"1","page":"css"}