Html Question posted in
Some basic documentation can be found here.

Html – How to style the meter element in chrome

I have a meter styled like so.

meter
{
    width: 5em;
    height: 2em;
    border-radius: 4px;
    border: 2px gray solid;
    color:red;
    background: lightgray;
}

meter::meter-bar
{
    background: green;
}

meter::-moz-meter-bar
{
    background: green;
}

meter::-webkit-meter-bar
{
    background: green;
}
<meter max="40" value="12"></meter>

In Firefox it looks like this:

meter rendered in Firefox

But in Google Chrome (version 131.0.6778.86 64 bit Windows) it looks like this:

meter rendered in Google Chrome

How can I get the Chrome version to look like the Firefox version?

Tags:

2

Answers


  1. 0

    To set the height of meter in Chome, you need to set height in ::webkit-meter-bar. I will provide updated code.

    meter
{
    width: 5em;
    height: 2em;
    border-radius: 4px;
    border: 2px gray solid;
    color:red;
    background: lightgray;
}

meter::meter-bar
{
    background: lightgray;
}

meter::-moz-meter-bar
{
    background: lightgray;
}

meter::-webkit-meter-bar
{
    background: lightgray;
    height: calc(2em - 4px); // Here, I deduct height 4px because border has 4px with top and bottom.
}

meter::-webkit-meter-optimum-value {
    background: green;
}
    <meter max="40" value="12"></meter>
    Login or Signup to reply.
  2. 0

    You’ll need to set the meter::-webkit-meter-optimum-value to the color you wish.

    And apply a full height on meter::-webkit-meter-bar to grow the bar.

    meter
{
    width: 5em;
    height: 2em;
    border-radius: 4px;
    border: 2px gray solid;
    background: lightgray;
}

meter::-webkit-meter-bar
{
    height: calc(2em - 4px);
}

meter::-webkit-meter-optimum-value {
    background: green;
}
    <meter max="40" value="12"></meter>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search