html5 progress firefox background color

Question

Я хочу использовать элемент прогресса HTML5 и сам его стиль. Это прекрасно работает, единственное, что Firefox неправильно отображает цвет фона.

См. Фрагмент ниже: В Chrome и Safari фоновый цвет тела и значение прогресса совпадают, в Firefox (на Mac, V50.0.2), однако, прогресс-значение имеет немного другой синий - но значение одно и то же.

body{ 
 
    background-color: #3c00ff; 
 
} 
 

 
progress{ 
 
    height: 1rem; 
 
    width: 10rem; 
 
    
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    appearance: none; 
 
    border: none; 
 
    background-color: red; 
 
} 
 

 
progress::-webkit-progress-bar{ background-color: red; } 
 
progress::-webkit-progress-value{ background-color: #3c00ff; }

<progress value="10" max="20"></progress>

В то время как есть :: - атрибут WebKit-прогресс-значение, нет ничего подобного с -moz- префиксом.

Это большой в Firefox? Любые идеи, как правильно это сделать?

Answer 1

Попробуйте использовать ::-moz-progress-bar

progress::-moz-progress-bar { 
    background-color: #3c00ff; 
} 

Что-то, как показано ниже -

body{ 
 
    background-color: #3c00ff; 
 
} 
 

 
progress{ 
 
    height: 1rem; 
 
    width: 10rem; 
 
    
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    appearance: none; 
 
    border: none; 
 
    background-color: red; 
 
} 
 

 
progress::-webkit-progress-bar{ background-color: red; } 
 
progress::-webkit-progress-value{ background-color: #3c00ff; } 
 

 
progress::-moz-progress-bar { 
 
    background-color: #3c00ff; 
 
}

<progress value="10" max="20"></progress>

Надеется, что это поможет вам в некотором роде (у).