Есть ли возможность окрасить метку прогресса html5?

Ответ 1

Это то, что вы ищете:

progress[value] {color:red} /* IE10 */
progress::-webkit-progress-bar-value {background:red}
progress::-webkit-progress-value {background:red}
progress::-moz-progress-bar {background:red}

Он отлично работает на Chrome и Firefox 6.
IE10 также поддерживает псевдо-элемент :: - ms-fill.

Ответ 2

В настоящее время нет. Дизайн/внешний вид индикатора выполнения в настоящее время определяется браузером, а CSS не может стилизовать индикатор выполнения.

Моим текущим решением является использование нескольких стилей div для создания и отображения индикатора выполнения с использованием CSS-спрайтов.

Ответ 3

Хорошо, я посмотрю, что я могу сделать, чтобы помочь:/

Я просмотрел стиль по умолчанию (стиль CSS этого) тега прогресса (с использованием опции элемента Google Chrome Inspect), и я нашел следующее (надеюсь, это поможет):

1.  -webkit-appearance: progress-bar;
2.  background-attachment: scroll;
3.  background-clip: border-box;
4.  background-color: gray;
5.  background-image: none;
6.  background-origin: padding-box;
7.  border-bottom-color: black;
8.  border-bottom-style: none;
9.  border-bottom-width: 0px;
10. border-left-width: 0px;
11. border-right-width: 0px;
12. border-top-color: black;
13. border-top-style: none;
14. border-top-width: 0px;
15. display: inline-block;
16. font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif;
17. font-size: 16px;
18. height: 16px;
19. line-height: 16px;
20. margin-bottom: 0px;
21. margin-left: 0px;
22. margin-right: 0px;
23. margin-top: 0px;
24. outline-color: black;
25. outline-style: none;
26. outline-width: 0px;
27. padding-bottom: 0px;
28. padding-left: 0px;
29. padding-right: 0px;
30. padding-top: 0px;
31. position: static;
32. text-align: center;
33. vertical-align: -3px;
34. width: 160px;
Styles
________________________________________

element.style {}
Matched CSS Rules
user agent stylesheet

progress {
1.  -webkit-appearance: progress-bar;
2.  display: inline-block;
3.  height: 1em;
4.  width: 10em;
5.  vertical-align: -0.2em;
6.  background-color: gray;
}

Pseudo element
user agent stylesheet

progress::-webkit-progress-bar-value {
1.  -webkit-appearance: progress-bar;
2.  background-color: green;
}

Ответ 4

Вы можете НЕ смешивать префиксы Mozilla и WebKit в одном и том же селекторе, должен создавать полностью отдельные правила для обоих механизмов рендеринга...

CSS

progress {background-color: #aaa !important;}

progress::-moz-progress-bar {background-color: #f0f !important;}

progress::-webkit-progress-value {background-color: #f0f !important;}

Протестировано в Firefox 31 и Chrome 37. Использование # f0f, потому что это должно быть легко обнаружить, если нет основных (и, вероятно, психологических) проблем с цветовой схемой.