Пользовательский индикатор выполнения в CSS

Question

У меня есть индикатор выполнения, и я хочу стилизовать его по умолчанию.

Я пробовал немного вещей, но это не сработало, как я ожидал.

Я хочу изменить цвет фона и радиус границы индикатора выполнения.

Когда я устанавливаю цвет фона, он изменяется от голубого до зеленого цвета по умолчанию, а не от установленного цвета.

<progress class="amount-progress" value="60500" max="120000">70 %</progress> 

Вы можете увидеть fiddle.

Когда я установил background-color, цвет меняется с синего на зеленый, который должен меняться на другой синий.

И я хочу, чтобы индикатор выполнения имел гладкий край.

Я установил border-radius но это тоже не сработало.

.amount-progress{ 
    width: 80%; 
margin-left: -11.5%; 
height: 22px; 
background-color: #0091EA; 

}

Answer 1

Вы должны работать с комплектом HTML5 прогрессом bar.These в настоящее время всех селекторы для прогресса стиля HTML5 бара:

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

так:

progress { 
 
    border-radius: 2px; 
 
    width: 80%; 
 
    height: 22px; 
 
    margin-left:-11.5%; 
 
} 
 
progress::-webkit-progress-bar { 
 
background-color: #0091EA; 
 
    border-radius: 2px; 
 
} 
 
progress::-webkit-progress-value { 
 
    border-radius: 2px; 
 
} 
 
progress::-moz-progress-bar { 
 
    /* style rules */ 
 
}

<progress value="60500" max="120000">70 %</progress>