Content does not work in Firefox - CSS

Asked

Viewed 22 times

-1

I have a Progress bar where in it I place a content assigning the percentage, according to the code:

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

progress:before {
  content: attr(data-label) " %";
  font-size: 0.8em;
  vertical-align: 0;
  border-radius: 80px;
  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="100" />

In Firefox, the Progress bar looks like this inserir a descrição da imagem aqui

In other browsers it gets right, that’s howinserir a descrição da imagem aqui

Is there any way to solve this in Firefox??

css

  • It seems that FF does not accept pseudo element in the Progress tag

1 answer

0

Try adding the following in the press:

border: none;
-webkit-appearance: none;

This is what you need to get Firefox up and running.

  • Worse that didn’t work out...

  • I took a look around and tried something: https://stackoverflow.com/questions/27480331/firefox-styling-progress-bar-value

Browser other questions tagged css

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