We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

Den här webbplatsen har begränsad funktionalitet medan vi utför underhåll för att förbättra din upplevelse. Om en artikel inte löser ditt problem och du vill ställa en fråga har vi vår gemenskap som väntar på att hjälpa dig på @FirefoxSupport på Twitter, /r/firefox på Reddit.

Sök i support

Akta dig för supportbedrägerier: Vi kommer aldrig att be dig att ringa eller skicka ett sms till ett telefonnummer eller dela personlig information. Rapportera misstänkt aktivitet med alternativet "Rapportera missbruk".

Läs mer

Styling the <meter> tag

  • 2 svar
  • 1 har detta problem
  • 1 visning
  • Senaste svar av 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?
Bifogade skärmdumpar

Ändrad av cor-el

Vald lösning

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;
}
Läs svaret i sitt sammanhang 👍 1

Alla svar (2)

more options

Vald lösning

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. :)