Индикатор выполнения в стиле Chrome

  • Автор темы FloopyToceexy
  • Обновлено
  • 18, May 2024
  • #1
Я не уверен, почему я не могу стилизовать цвет заливки индикатора выполнения в Chrome.

Я устанавливаю цвет, но ничего не происходит.

Может ли кто-нибудь помочь? Проблема в том, что #health-bar не становится красным.

Также пытаюсь сделать полосу красной во всех браузерах.

Не уверен, когда использовать цвет или фон.

Спасибо за помощь
 /* Progress Resets*/

progress, /* All HTML5 progress enabled browsers */
progress[role] /* polyfill */
{

 /* gets rid of default border in Firefox and Opera. */
 border: none;

 /* Needs to be in here for Safari polyfill so background images work as expected. */
 background-size: auto;

}

/* Polyfill */
progress[role]:after {
 background-image: none; /* removes default background from polyfill */
}

/* Ensure fallback text doesn't appear in polyfill */
progress[role] strong {
 display: none;
}

/* Health Bar */

#health-bar {

 color:red;

}
#health-bar::-webkit-progress-bar {

 color: #ffeeee;

}
#health-bar::-webkit-progress-value {

 background: red;

}

#health-bar::-moz-progress-bar {
 background:red;
}

/* Polyfill */
#health-bar[aria-valuenow]:before {

 background: black;

}
Код (CSS):

FloopyToceexy


Рег
05 Jul, 2012

Тем
71

Постов
197

Баллов
562
  • 21, May 2024
  • #2
Сам я не пробовал Progress, но вы можете посмотреть эту статью здесь: https://css-tricks.com/html5-progress-element/

Кажется, решает большинство проблем и даже является запасным вариантом для несовместимых браузеров.
 

Djrust


Рег
01 Jan, 2011

Тем
57

Постов
203

Баллов
488
  • 07, Jun 2024
  • #3
Обычно подобные проблемы связаны не только с тем, почему я не использую . Я задаюсь вопросом, почему он вообще существует, поскольку он действительно полезен только для сценариев.

и если это элемент только для сценариев, почему *** у него есть тег ? Гораздо меньше дурацкой мешанины проприетарных значений, которую вы должны в это бросать.

Есть причина для чего-то подобного: я бы просто поместил div внутри div, установил фиксированную ширину для внешнего и ширину в % и высота на внутреннем.

Задача решена. ... и я бы сгенерировал это из сценариев в DOM, вместо того, чтобы портить всю разметку кодом, состоящим только из сценариев.
 

Rtyui


Рег
22 Jul, 2015

Тем
81

Постов
185

Баллов
610
  • 10, Jun 2024
  • #4
Спасибо за статью.

Я вырезал и вставил код, но все равно ничего хорошего.

Я нашел решение, которое работает хорошо.

HTML5-метр.

Его намного проще стилизовать в разных браузерах, и у него есть удобная функция. Мин Макс Низкий Высокий Оптимум Каждое значение может иметь свой цвет.

Аккуратно для игр. Полоса здоровья красная при оптимальном уровне, желтая при высоком и черная при низком.
 

Серёга Т


Рег
19 Aug, 2012

Тем
71

Постов
204

Баллов
569
Тем
403,760
Комментарии
400,028
Опыт
2,418,908

Интересно