htmlcssgoogle-chrome

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?

Solution

  • 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: green;
}

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

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>