проблемы с дизайном с progressbar chrome

Question

У меня есть программа в html, которая имеет элемент прогресса. Он становится синим в firefox, но отказывается работать в хроме, и он становится зеленым, чего я не хочу. мой код

progress { 
    color: #0063a6; 
    font-size: .6em; 
    line-height: 1.5em; 
    text-indent: .5em; 
    width: 30em; 
    height: 3em; 
    border: 1px solid #0063a6; 
    background: #fff; 
} 

<progress value ="50" max ="100"></progress> 

Answer 1

Вы должны сделать две вещи. Первый сброс стиль ProgressBar в это значения по умолчанию, а затем целевой внешний вид с браузером определенного класса псевдо вроде так:

progress { 
    -webkit-appearance: none; 
    appearance: none; 
} 

progress::-webkit-progress-bar { 
    background-color: #eee; 
    border-radius: 2px; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset; 
} 

стилизации бар сам делается с помощью фонового изображения:

progress[value]::-webkit-progress-value { 
    background-image: 
     -webkit-linear-gradient(-45deg, 
          transparent 33%, rgba(0, 0, 0, .1) 33%, 
          rgba(0,0, 0, .1) 66%, transparent 66%), 
     -webkit-linear-gradient(top, 
          rgba(255, 255, 255, .25), 
          rgba(0, 0, 0, .25)), 
     -webkit-linear-gradient(left, #09c, #f44); 

    border-radius: 2px; 
    background-size: 35px 20px, 100% 100%, 100% 100%; 
    } 

Прочтите полную статью здесь: https://css-tricks.com/html5-progress-element/