Mozilla Support में खोजें

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Styling the <meter> tag

  • 2 प्रत्युत्तर
  • 1 यह समस्या है
  • 1 view
  • के द्वारा अंतिम प्रतियुतर Admin

more options

Hi!

I have a problem with styling the meter tag. Read this article but there is no mention of this. Styling the <meter> tag

I want the meter to have round edges so I tried putting border-radius on meter::-webkit-meter-optimum-value but it didn't work. Putting it on the meter::-moz-meter-bar gave me round edges on the filling (see the photo) but the background still has 90° edges.

Does anyone know how can those background edges be styled?

Hi! I have a problem with styling the meter tag. Read this article but there is no mention of this. [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter Styling the <meter> tag] I want the meter to have round edges so I tried putting border-radius on meter::-webkit-meter-optimum-value but it didn't work. Putting it on the meter::-moz-meter-bar gave me round edges on the filling (see the photo) but the background still has 90° edges. Does anyone know how can those background edges be styled?
संलग्न स्क्रीनशॉट

cor-el द्वारा सम्पादित

चुने गए समाधान

Try to set the radius on both meter and the meter-bar.

meter{
  background: #0f0;
  border-radius:2rem;
}

meter::-moz-meter-bar {
  background: #f00;
  border-radius:2rem;
}
संदर्भ में यह जवाब पढ़ें 👍 1

All Replies (2)

more options

चयनित समाधान

Try to set the radius on both meter and the meter-bar.

meter{
  background: #0f0;
  border-radius:2rem;
}

meter::-moz-meter-bar {
  background: #f00;
  border-radius:2rem;
}
more options

That's it!

Thanks for the help. :)