Внешний вид progress

Question

Сейчас я уже жалею, что решил использовать этот тег, но что-то изменять уже поздно. Как изменить внешний вид progress?

.progress_main {
    width: 140px;
    height: 30px;

    background: yellow;
    
}

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

Что я упускаю? Убираю background из класса, пропадает вообще фон прогресс бара. Убираю из progress::-webkit-progress-value, он становится зеленым. Я сдаюсь.

Answer 1

Для всех браузеров на движке webkit:

progress {
  -webkit-appearance: none;
}

::-webkit-progress-inner-element {
  border: 2px dashed red;
}

::-webkit-progress-bar {
  background-color: orange;
}

::-webkit-progress-value {
  background-color: lime;
}

<progress value="70" max="100"/><br/>

Для всех браузеров mozilla:

::-moz-progress-bar {
  background-color: red;
}

:indeterminate::-moz-progress-bar {
  width: 10px;
}

<progress value="30" max="100">30%</progress>
<progress max="100">Indeterminate</progress>

Для Edge и IE:

progress::-ms-fill {
  background-color: orange;
}

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

Answer 2

"Привязанные" теги - лучше не использовать. Решать через CSS:

.progres-bar {
position: relative;       
width: %;                 
height: px;
background: #; 
margin-left: %;                         
cursor: pointer;

}

и - цвет итога:

.progres{ 
position: absolute; 
left: 0;
width: 0;                     
height: 100%;
background: #;

}

и - ползунок:

.progres:after{  
position: absolute;
content: "";                              
width: px;               
height: px;               
border-radius: 100%;
background: #;
top: px;                 
left: calc(100% - 1px);

}

БЛОГ НА HUSL

Внешний вид progress

Ответы (2 шт):