Progressbar - stylizacja nie działa na mozilli

Question

#leftheader
{
	padding: 30px;
	float: left;
	border: 1px solid black;
	background-color: #2A2A2A;
	color: white;
	border-radius: 10px;
}
#leftheader > .leftprofile > progress
{
	height: 8px;
	background: #444;
	border-radius: 10px;
}
#leftheader > .leftprofile > progress::-webkit-progress-bar {
    background: transparent;
}  
#leftheader > .leftprofile >  progress::-webkit-progress-value
{
	background: linear-gradient(to right, red, black);
	border-radius: 10px;
}

 

 

			<div class="leftprofile">
				<img src="img/stats/health.png" alt=""> Health<br>
				<progress value="100" max="100"></progress><br>
				<img src="img/stats/energy.png" alt=""> Energy<br>
				<progress value="90" max="100"></progress><br>
				<img src="img/stats/drink.png" alt=""> Drink<br>
				<progress value="70" max="100"></progress><br>
				<img src="img/stats/food.png" alt=""> Food<br>
				<progress value="60" max="100"></progress><br>
				<img src="img/stats/hygiene.png" alt=""> Hygiene<br>
				<progress value="100" max="100"></progress><br>
				<img src="img/stats/exp.png" alt=""> Level 0<br>
				<progress value="10" max="100"></progress><br>

			</div>

 

 

Na Google Chrome działa, na Mozilli nie. Chodzi o kolory progrss baru, a konkretnie ten gradient.

Answer 1

> progress::-webkit-progress-value
> progress::-webkit-progress-bar

A ty się dziwisz, że nie działa? :D

Comments

A jak zrobić, żeby działało? :) Są jakieś odpowiedniki dla mozilli?

---

https://css-tricks.com/html5-progress-element/