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

Question

Есть ли возможность покрасить тег прогресса в css? Я попробовал это. Но работает только ширина и высота. Я хочу, чтобы скин цвета прогрессии (внутренний цвет, который показывает процент загрузки). Возможно ли это?

Answer 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 .

Answer 2

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

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

Answer 3

Вы можете НЕ смешивать префиксы 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, потому что его должно быть легко заметным, если только нет фундаментальных (и, вероятно, психологических) проблем с цветомсхема.

Answer 4

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

Я посмотрел на стиль по умолчанию (его стиль 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;
}