Có khả năng tô màu thẻ tiến trình html5 không?

Question

Có khả năng tô màu thẻ tiến trình trong css không? Tôi đã thử nó. Nhưng chỉ chiều rộng và chiều cao mới hoạt động. Tôi muốn da màu sắc của sự tiến triển (màu bên trong trong đó cho thấy tỷ lệ phần trăm của tải về). Có thể không?

Answer 1

Hiện tại không có. Thiết kế/giao diện của thanh tiến trình hiện được xác định bởi trình duyệt và CSS không thể tạo kiểu cho thanh tiến trình.

Giải pháp hiện tại của tôi là sử dụng nhiều div s để tạo kiểu và hiển thị thanh tiến trình, sử dụng hình ảnh sprite CSS.

Answer 2

Đây là những gì bạn đang tìm kiếm:

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

Nó chỉ làm việc tốt trên Chrome và Firefox 6.
IE10 cũng hỗ trợ phần tử giả ::-ms-fill.

Answer 3

Vâng, tôi sẽ thấy những gì tôi có thể làm gì để giúp đỡ:/

Tôi đã nhìn vào phong cách mặc định (css phong cách của nó) của thẻ tiến bộ (sử dụng tùy chọn yếu tố Kiểm tra Google Chrome) và những gì tôi tìm thấy được như sau (hy vọng điều này sẽ giúp):

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

bạn có thể KHÔNG trộn Mozilla và WebKit tiền tố trong bộ chọn tương tự, bạn phải tạo các quy tắc hoàn toàn riêng biệt cho cả hai động cơ render ...

012.

CSS

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

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

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

Tested trong Firefox 31 và Chrome 37. Sử dụng # f0f vì nó nên được dễ dàng để phát hiện nếu không có cơ bản (và có lẽ tâm lý) các vấn đề với các màu sắc.