Не удаётся стилизовать прогресс бар css

Question

.p::webkit-progress-bar {    background: red; }

<progress class="p"> <progress/>

Answer 1

Для начала нужно отключить дефолтное отображение прогесс-бара с помощью -webkit-appearance: none;, а уже потом задавать фон:

.p { -webkit-appearance: none; }
.p::-webkit-progress-bar { background: red; }

<progress class="p"> </progress>

Answer 2

.p {
  accent-color: red;
}

/* или так */

progress {
  accent-color: red;
}

<progress class="p"> </progress>

Можно попробовать через accent-color если нужно поменять цвет самого ползунка