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

  • Автор темы AdRUS
  • 38
  • Обновлено
  • 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):

AdRUS


Рег
05 Jul, 2012

Тем
1

Постов
2

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

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

djrust


Рег
01 Jan, 2011

Тем
0

Постов
3

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

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

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

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

rtyui


Рег
22 Jul, 2015

Тем
1

Постов
2

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

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

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

HTML5-метр.

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

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

Серёга Т


Рег
19 Aug, 2012

Тем
0

Постов
3

Баллов
3
Тем
49554
Комментарии
57426
Опыт
552966

Интересно