16もmeter要素に対応し、またWebkitの指定方法も変更されていましたので改めてメモしておきます。前回同様にOperaについてはスタイリングの方法が分かりませんので(まだないっぽい)、WebkitとFirefox向けの指定方法となります。時間のある方は前の記事も読んでおくと理解しやすいかと思います。Webkit向け::-webkit-meter-inner-elementこれはユーザーエージェントスタイルシートに書かれているものですが、気にしなくていいと思います。meter要素の中の部分を指定します。::-webkit-meter-barメーター自体を指す擬似要素です。バーの背景などはここで指定します。以前あった横方向・縦方向の指定はなくなっています。::-webkit-meter-optimum-valuemeter要素の値が最適領域にあるときのメーターの値の部分を指します。何も指定していない場合は緑色のグラデーションになります。::-webkit-meter-suboptimum-value値が準最適領域にあるときのメーターの値の部分を指します。以前は::-webkit-meter-horizontal[vertical]-suboptimal-valueという擬似要素でした。何も指定していない場合は黄色のグラデーションになります。::-webkit-meter-even-less-good-value値が非最適領域にあるときのメーターの値の部分を指します。何も指定していない場合は赤色のグラデーションになります。ちなみに、2012年10月12日時点でのユーザーエージェントスタイルシートは次のようになっています。これはtrunk/Source/WebCore/cssで見ることができます。developers」で触れられています。Webkitと違うのは、値の状態は擬似クラスで指定し、メーターの値の部分は擬似要素として別に指定しなければならないことです。659999」には書かれています。これはメーターの値の部分を指します。:-moz-meter-optimummeter要素の値が最適領域にある状態を指す擬似クラスです。何も指定していない場合、この状態の::-moz-meter-barは緑色のグラデーションになります。:-moz-meter-sub-optimum値が準最適領域にある状態を指す擬似クラスです。何も指定していない場合、この状態の::-moz-meter-barは黄色のグラデーションになります。オレンジって書かれてますが):-moz-meter-sub-sub-optimum値が非最適領域にある状態を指す擬似クラスです。準々最適領域みたいな表記ですね......。何も指定していない場合、この状態の::-moz-meter-barは赤色のグラデーションになります。2012年10月12日時点でのユーザーエージェントスタイルシートは次のようになっています。これはresource://gre-resources/forms.cssで見ることができます。55%);}上記2つを使ってみるでは実際に指定してみます。HTMLは以前の記事で使ったサンプルと同じです。1メーターの背景ですが、Webkit向けには::-webkit-meter-barに、Firefox向けにはmeter要素に指定します。他はまあ問題ないと思います。グラデーションの指定をしていない場合はこういう見た目になります。2ここで書いたものは現時点でのものですので、変更される可能性があります。実際に使う場合にはそのあたりも気に留めておいて下さい。Requestを送るIssueを作成するTwitterでメンションする記事を共有TwitterFacebookPocketはてなブックマークLINEコンテンツホームブログこのサイトについて。