Czy istnieje możliwość kolorowania znacznika postępu html5?

Question

Czy istnieje możliwość kolorowania znacznika postępu w css? Próbowałem tego. Ale działa tylko szerokość i wysokość. Chcę zmienić kolor progresji (kolor wewnętrzny, który pokazuje procent pobierania). Czy to możliwe?

Answer 1

Obecnie nie. Wygląd/wygląd paska postępu jest obecnie definiowany przez przeglądarkę, a CSS nie może nadawać stylu pasku postępu.

Moje obecne rozwiązanie polega na użyciu wielu modeli div do stylizowania i pokazywania paska postępu za pomocą ikonek sprite CSS.

Answer 2

To jest to, czego szukasz:

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

To działa dobrze na Chrome i Firefox 6.
IE10 obsługuje również pseudoelement ::-ms-fill.

Answer 3

Cóż ja zobaczę, co mogę zrobić, aby pomóc:/

Mam spojrzał na domyślnym stylu (styl css z nim) znacznika postępu (używając Inspect opcję elementu Google Chrome) i co ja znaleziono jest następujący (mam nadzieję, że to pomaga):

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; 
} 

Answer 4

można NIE mix Mozilli i WebKit prefiksy w tym samym przełącznikiem, ty musi stworzyć całkowicie odrębne zasady dla obu silników renderowania ...

CSS

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

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

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

Testowany w Firefoksie i Chrome 31 37. Korzystanie # f0f ponieważ powinny być łatwe do wykrycia, chyba że istnieje zasadnicza (i prawdopodobnie psychologiczny) problemy z kolorystyką.