Unable to overwrite <meter> styles in Chrome 12

Question

I just upgraded to Chrome 12 and I'm noticing that my "meter" styling no longer works on chrome.

I was using something like:

meter::-webkit-meter-horizontal-optimum-value,
meter::-webkit-meter-horizontal-suboptimal-value,
meter::-webkit-meter-horizontal-even-less-good-value {
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#cea), to(#7a3));
}

It was working fine until I updated to Chrome 12.

Interestingly, I can no longer see the user agent styles for these pseudo-elements with the web inspector, even on other sites that I visit. For an example, inspect Bruce Lawson's experiment:

http://people.opera.com/brucel/dev/html5-meter-style.html

I've also tried going over the user-stylesheet on the webkit trac page:

http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

Is there a new way to style meters in Chrome?

Answer 1

I filed a bug with the Chrome dev team and it turns out Chrome 12+ require you to reset the default user-agent styling with "-webkit-appearance: none" prior to being able to override the element with one's own styling.

More specifically, one needs to add the following rule:

meter { -webkit-appearance: none; }

Here's the link to the ticket: http://code.google.com/p/chromium/issues/detail?id=86009

Here's a jsFiddle: http://jsfiddle.net/F8tJu/1/