Unable to overwrite <meter> styles in Chrome 12

Question

I just upgraded to Chrome 12 and I notice that my meter style no longer works on chrome.

I used 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 worked fine until I upgraded 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 example, check out Bruce Lawson's experiment:

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

I also tried looking at the custom stylesheet on the trac website page:

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

Is there a new way to create counters in Chrome?

Answer 1

I filed an error with the Chrome development team, and it turned out that Chrome 12+ needed to reset the default user agent style with "-webkit-appearance: none" before it could override the element with one native style.

In particular, the following rule should be added:

 meter { -webkit-appearance: none; } 

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

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