Как поменять цвет progress bar`а в css?

Question

[Андрей Чирков]

Как поменять цвет прогресс бара? не фона, а именно полосы прогресса.

Comments

[Антон Литвиненко]

Попробуйте css

[Андрей Чирков]

Антон Литвиненко, да ладно

[Lord_Dantes]

Андрей Чирков, прохладно. Код скиньте в песочницу.

[Андрей Чирков]

Slava,

<div class="team-chinen__skils">
      <p class="team-chinen__info">UI/UX Design</p>
      <progress class="team-chinen__progress" max="100" value="80"></progress>
      <p class="team-chinen__info">UI/UX Design</p>
      <progress class="team-chinen__progress" max="100" value="80"></progress>
      <p class="team-chinen__info">UI/UX Design</p>
      <progress class="team-chinen__progress" max="100" value="80"></progress>
 </div>

[Lord_Dantes]

Андрей Чирков, а CSS

[Андрей Чирков]

Slava,

.team-chinen__skils {
 display: none;
 flex-direction: column;
}

.team-chinen__work:hover {
 transition-duration: 0.3s;
 background-color: @flat_hover_color;
 .team-chinen__box-texts {
  position: relative;
  top: 10%;
  background-color: transparent;
  width: 60%;
  .team-chinen__text {
   color:@orange_ui;
  }
 }
 .team-chinen__skils {
  display: flex;
 }
}


.team-chinen__progress {
 border: none;
 color: #fff;
 height: 5px;
 background-color: @logo_color;
}

[Lord_Dantes]

Андрей Чирков, странно что вы используете такие вещи как SCSS но гуглить не умеете.

[Андрей Чирков]

Slava, да я сколько гуглил, там они через 3-4 дива это делают, я думал есть способ попроще. Но раз уж не подскажете, буду делать как в гугле

[Lord_Dantes]

Андрей Чирков, я ответил ниже

Answer 1

[Никита Михайлов]

Каким образом организована вёрстка? Скиньте код

Comments

[Андрей Чирков]

<div class="team-chinen__skils">
      <p class="team-chinen__info">UI/UX Design</p>
      <progress class="team-chinen__progress" max="100" value="80"></progress>
      <p class="team-chinen__info">UI/UX Design</p>
      <progress class="team-chinen__progress" max="100" value="80"></progress>
      <p class="team-chinen__info">UI/UX Design</p>
      <progress class="team-chinen__progress" max="100" value="80"></progress>
     </div>

Answer 2

[Lord_Dantes]

Загуглил: google.com

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

Comments

[Андрей Чирков]

в Chrome сработало, а в Mozila нет, есть псевдоэлемент для всех браузеров?

[Lord_Dantes]

Андрей Чирков, да. загуглите

[Андрей Чирков]

Slava, а не кстати, не сработало. В хроме полоска зеленая как была, так и осталась. В мозиле она по умолчанию темно-синяя. Так что не сработало