Cách đặt màu cho phần tử tiến trình CSS3 html5?

Question

Có thể đặt màu của "thanh" cho phần tử trong HTML5 (khi bạn chỉ định một giá trị, thanh được lấp đầy đến điểm của giá trị) không? Nếu vậy, làm thế nào? background-color và background dường như không có hiệu ứng. Kỹ thuật có tương thích với phiên bản mới nhất của tất cả các trình duyệt không?

Answer 1

Bạn có thể tạo kiểu cho màu sắc của thanh trong phần tử <progress> bằng cách thay đổi background của một số bộ chọn độc quyền trình duyệt.

Trong Firefox, bạn có thể sử dụng như sau:

progress::-moz-progress-bar { background: blue; } 

Trong Chrome hoặc Safari, bạn có thể sử dụng:

progress::-webkit-progress-value { background: blue; } 

Trong IE10, bạn chỉ cần sử dụng color thuộc tính:

progress { color: blue; } 

Nguồn: http://html5doctor.com/the-progress-element/

Answer 2

Mỗi trình duyệt dường như để xử lý kiểu dáng thanh tiến trình khác nhau vào lúc này, và do đó bạn cần để định dạng như thế này:

progress { 
/* style rules */ 
} 
progress::-webkit-progress-bar { 
/* style rules */ 
} 
progress::-webkit-progress-value { 
/* style rules */ 
} 
progress::-moz-progress-bar { 
/* style rules */ 
} 

WebKit phong cách dành cho Chrome và Safari và moz phong cách cho Firefox.

Từ đây bạn chỉ cần thêm màu nền với background-color.

Chúc may mắn! Bất kỳ câu hỏi nào, hãy gửi cho tôi nhận xét bên dưới.

Answer 3

WebKit/Blink

background-color

Để tô màu cho background-color của một yếu tố progress (phần mà không làm tăng/giảm) trong các trình duyệt WebKit sử dụng như sau:

progress::-webkit-progress-bar {background-color: #000; width: 100%;} 

màu

Để tô màu cho hiệu quảcolor của di chuyển một phần của một yếu tố progress sử dụng như sau:

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

---

Gecko/Firefox

background-color

Để tô màu cho background-color của một yếu tố progress (phần mà không làm tăng/giảm) trong các trình duyệt Gecko sử dụng như sau:

progress {background-color: #000;} 

màu

Để tô màu cho hiệu quảcolor của di chuyển một phần của phần tử progress sử dụng các mục sau:

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

---

Trident/Internet Explorer (và "Edge")

Khi Microsoft thực sự làm cho các nỗ lực họ thực sự thực sự đi qua, điều này thực sự làm cho hoàn hảo tinh thần thẳng về phía trước.

background-color

progress {background-color: #000;} 

màu

progress {color: #aaa;}