Как установить цвет для элемента CSS3 html5 progress?

Ответ 1

Вы можете пометить цвет панели в элементе <progress>, изменив background нескольких селекторов, основанных на браузере.

В Firefox вы можете использовать следующее:

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

В Chrome или Safari вы можете использовать:

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

В IE10 вам просто нужно использовать атрибут color:

progress { color: blue; }

Источник: http://html5doctor.com/the-progress-element/

Ответ 2

WebKit/Blink

цвет фона

Чтобы цвет background-color элемента progress (часть, которая не увеличивается/уменьшается) в браузерах WebKit, используйте следующее:

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

цвет

Чтобы покрасить эффективную color части движущейся элемента progress, используйте следующее:

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

Gecko/Firefox

цвет фона

Чтобы цвет background-color элемента progress (часть, которая не увеличивается/уменьшается) в браузерах Gecko, используйте следующее:

progress {background-color: #000;}

цвет

Чтобы покрасить эффективную color части движущейся элемента progress, используйте следующее:

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

Trident/Internet Explorer (и "Edge" )

Когда Microsoft на самом деле прикладывает усилия, которые они действительно выполняют, это фактически делает идеальный прямолинейный смысл.

цвет фона

progress {background-color: #000;}

цвет

progress {color: #aaa;}

Ответ 3

Каждый браузер, похоже, по-разному управляет стилем выполнения, и поэтому вам нужно стилизовать его так:

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

WebKit для стилей Chrome и Safari и moz для Firefox.

Здесь вы можете просто добавить цвет фона с помощью background-color.

Удачи! Любые запросы, напишите мне ниже.