Css not working in firefox

Asked

Viewed 54 times

-2

I have a pub Progress that has some styles in it.

inserir a descrição da imagem aqui

I made some adjustments to it, such as placing border Radius and adding text inside the Progress bar. The problem is that when I preview this Progress bar in Firefox for some reason it doesn’t work. How can I fix this?

inserir a descrição da imagem aqui

progress {
  text-align: center;
  height: 20px;
  width: 70px;
  -webkit-appearance: none;
  border-radius: 80px;
  /* Set the progressbar to relative */
  position: relative;
  font-size: 22px;
  color: white;
}

progress:before {
  content: attr(data-label)" %";
  font-size: 0.8em;
  vertical-align: 0;
  border-radius: 80px;
  /*Position text over the progress bar */
  position: absolute;
  left: 0;
  right: 0;
}

progress::-webkit-progress-bar {
  background-color: #c9c9c9;
  border-radius: 80px;
}

progress::-webkit-progress-value {
  background-color: #7CB342;
  border-radius: 80px;
}

progress::-moz-progress-bar {
  background-color: #7CB342;
}
<progress data-label="83" />

css

1 answer

-2


Only "border-Radius: 80px;" in "Progress::-Moz-Progress-bar", which is what precisely defines the style of the progressibar for firefox.

progress {
  text-align: center;
  height: 20px;
  width: 70px;
  -webkit-appearance: none;
  border-radius: 80px;
  /* Set the progressbar to relative */
  position: relative;
  font-size: 22px;
  color: white;
}

progress:before {
  content: attr(data-label)" %";
  font-size: 0.8em;
  vertical-align: 0;
  border-radius: 80px;
  /*Position text over the progress bar */
  position: absolute;
  left: 0;
  right: 0;
}

progress::-webkit-progress-bar {
  background-color: #c9c9c9;
  border-radius: 80px;
}

progress::-webkit-progress-value {
  background-color: #7CB342;
  border-radius: 80px;
}

progress::-moz-progress-bar {
  background-color: #7CB342;
  border-radius: 80px;
}
<progress data-label="83" />

  • That was missing, but the content text is still missing: attr(data-label)" %"; Do you know what it might be? What shows 83% for example, equal to Chrome for example

  • Poxa amigo, the attr() function can be used with any CSS property, but support for properties other than content is experimental in firefox, according to the following link: https://developer.mozilla.org/en-US/docs/Web/CSS/attr(). I suggest using a JS to manipulate the result, leaving the content empty.

  • The browsers are API and we are limited to their implementations, we can not always do everything we want... but there are ways to circumvent this, using the value between the tags Progress and update via JS itself, selecting the element and setting the text (innerText).

  • It discourages to suggest something, because everything in the stack the negative people... lately (in recent years) the gang only knows how to do it...

  • 1

    "I suggest using a JS to manipulate the result". It’s because my application is angular. But thank you very much for the support there and the answers, I can already turn around here

  • 1

    "It discourages to suggest something, because everything in the stack the negative people.". Unfortunately it is so, I discourage tbm, I only asked this question because I really was not having another option. But it is complicated msm

Show 1 more comment

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.