CODEWITHSUNDEEP
htmlcss
Dharman
Dharman

Reputation: 33238

Meter tag with inverted values

I want to warn a user if a container is getting empty so i thought the meter tag would be good. But the meter tag changes color only if the amount is above the high and not below the low. Is there any chance I could tell it to change color when it gets low?

Sample code: 

<p>He got a <meter low="69" high="80" max="100" value="89">B</meter> on the exam.</p>

Upvotes: 1

Views: 715

Answers (1)

Danield
Danield

Reputation: 125443

If you want to swap the colors of high and low on the meter element - just switch the backgrounds of the pseudo-elements meter::-webkit-meter-even-less-good-value and meter::-webkit-meter-optimum-value

FIDDLE

Where on earth did I get those properties from?

Well, first you need to edit the browser settings to show the Shadow DOM.

1) In developer tools - click settings:

enter image description here

2) Check the box: Show shadow DOM

enter image description here

2) Then inspect the DOM again and viola, all of the hidden internal elements of the meter are revealed and are able to be tweaked:

enter image description here

enter image description here

Markup

<p>He got a <meter low="69" high="80" max="100" value="25">F</meter> on the exam.</p>

<p>He got a <meter low="69" high="80" max="100" value="76">C</meter> on the exam.</p>

<p>He got a <meter low="69" high="80" max="100" value="91">A</meter> on the exam.</p>

CSS

meter::-webkit-meter-even-less-good-value {
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(170, 221, 119)), color-stop(0.2, rgb(204, 238, 170)), color-stop(0.45, rgb(119, 170, 51)), color-stop(0.55, rgb(119, 170, 51)), to(rgb(170, 221, 119)));

}

meter::-webkit-meter-optimum-value {
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 119, 119)), color-stop(0.2, rgb(255, 204, 204)), color-stop(0.45, rgb(221, 68, 68)), color-stop(0.55, rgb(221, 68, 68)), to(rgb(255, 119, 119)));

}

EDIT:

I just noticed that there's a css-tricks article on the meter element which explains (amongst other things) all of the default webkit styling

Upvotes: 2

Related Questions