Progress in IE
Progress bars in IE add a black line and don't show the specified color for 100%.
by Aldaron
HTML
<progress max="100" value="10"></progress><br/>
<progress max="100" value="30"></progress><br/>
<progress max="100" value="50"></progress><br/>
<progress max="100" value="70"></progress><br/>
<progress max="100" value="90"></progress><br/>
<progress max="100" value="100"></progress>
CSS
progress,
progress[value]
{
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
background-size: auto;
width: 200px;
height: 20px;
border: 0;
color: #eee;
}
progress::-webkit-progress-value,
progress::-moz-progress-bar
{
background-color: black;
}
progress[value]::-webkit-progress-bar
{
background-color: #eee;
}
progress:hover, img:hover
{
opacity: 0.7;
}
progress[value^="0"]::-webkit-progress-value,
progress[value^="1"]::-webkit-progress-value,
progress[value^="2"]::-webkit-progress-value
{
background-color: red;
}
progress[value^="0"]::-moz-progress-bar,
progress[value^="1"]::-moz-progress-bar,
progress[value^="2"]::-moz-progress-bar
{
background-color: red;
}
progress[value^="0"],
progress[value^="1"],
progress[value^="2"]
{
color: red;
}
progress[value^="3"]::-webkit-progress-value,
progress[value^="4"]::-webkit-progress-value,
progress[value^="5"]::-webkit-progress-value
{
background-color: yellow;
}
progress[value^="3"]::-moz-progress-bar,
progress[value^="4"]::-moz-progress-bar,
progress[value^="5"]::-moz-progress-bar
{
background-color: yellow;
}
progress[value^="3"],
progress[value^="4"],
progress[value^="5"]
{
color: yellow;
}
progress[value^="6"]::-webkit-progress-value,
progress[value^="7"]::-webkit-progress-value,
progress[value^="8"]::-webkit-progress-value,
progress[value^="9"]::-webkit-progress-value
{
background-color: green;
}
progress[value^="6"]::-moz-progress-bar,
progress[value^="7"]::-moz-progress-bar,
progress[value^="8"]::-moz-progress-bar,
progress[value^="9"]::-moz-progress-bar
{
background-color: green;
}
progress[value^="6"],
progress[value^="7"],
progress[value^="8"],
progress[value^="9"]
{
color: green;
}
progress[value="100"]::-webkit-progress-value
{
background-color: #00ff00;
}
progress[value="100"]::-moz-progress-bar
{
background-color: #00ff00;
}
progress[value="100"]
{
background-color:...