29

<meter>新しいタグをどのようにスタイルできるか疑問に思っています。

<meter value=80 min=0 max=100>
  80/100
</meter>

背景色と値の色を変更したいだけですが、適切な CSS プロパティが見つかりません。Webkit ベースのブラウザーの場合、次のことがわかりました。

meter::-webkit-meter-horizontal-bar {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DDD), color-stop(0.2, #EEE), color-stop(0.45, #CCC), color-stop(0.55, #CCC), to(#DDD));
}
Pseudo element
meter::-webkit-meter-horizontal-optimum-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#AD7), color-stop(0.2, #CEA), color-stop(0.45, #7A3), color-stop(0.55, #7A3), to(#AD7));
}
Pseudo element
meter::-webkit-meter-horizontal-suboptimal-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FE7), to(#FE7), color-stop(0.2, #FFC), color-stop(0.45, #DB3), color-stop(0.55, #DB3));
}
Pseudo element
meter::-webkit-meter-horizontal-even-less-good-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F77), to(#F77), color-stop(0.2, #FCC), color-stop(0.45, #D44), color-stop(0.55, #D44));
}
Pseudo element
meter::-webkit-meter-vertical-bar {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#DDD), to(#DDD), color-stop(0.2, #EEE), color-stop(0.45, #CCC), color-stop(0.55, #CCC));
}
Pseudo element
meter::-webkit-meter-vertical-optimum-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#AD7), to(#AD7), color-stop(0.2, #CEA), color-stop(0.45, #7A3), color-stop(0.55, #7A3));
}
Pseudo element
meter::-webkit-meter-vertical-suboptimal-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#FE7), to(#FE7), color-stop(0.2, #FFC), color-stop(0.45, #DB3), color-stop(0.55, #DB3));
}
Pseudo element
meter::-webkit-meter-vertical-even-less-good-value {
-webkit-appearance: meter;
background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#F77), to(#F77), color-stop(0.2, #FCC), color-stop(0.45, #D44), color-stop(0.55, #D44));
}

gecko ベースのブラウザー (Firefox)、Opera、および IE の適切な CSS プロパティはどこにありますか?

4

6 に答える 6

14

次のコードを使用して、Webkit ブラウザーで微妙なグラデーションを使用してメーターのスタイルを設定しました。

meter { -webkit-appearance: none; } //Crucial, this will disable the default styling in Webkit browsers

meter::-webkit-meter-bar {
    background: #FFF;
    border: 1px solid #CCC;
}

meter::-webkit-meter-optimum-value {
    background: #87C7DE;
    background: -moz-linear-gradient(top, #a1d4e6 0%, #6bb4d1 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a1d4e6), color-stop(100%, #6bb4d1));
    background: -webkit-linear-gradient(top, #a1d4e6 0%, #6bb4d1 100%);
    background: -o-linear-gradient(top, #a1d4e6 0%, #6bb4d1 100%);
    background: -ms-linear-gradient(top, #a1d4e6 0%, #6bb4d1 100%);
    background: linear-gradient(to bottom, #a1d4e6 0%, #6bb4d1 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a1d4e6', endColorstr='#6bb4d1',GradientType=0);
}

ただし、CSS-Tricks の Chris Coyier は、次の HTMLコードを推奨しています。

<div class="meter">
    <span style="width: 25%"></span>
</div>

<meter>... HTML5や<progress>タグではなく。現時点（2013 年 2 月）で、私は彼に同意します。

さらに悪いことに、WebKit ブラウザーが異なっていても、ブラウザー間で状況が大きく異なります。疑似要素も一貫性のない動作をします。このままぶら下がったままにしておくのは嫌いですが、これは別の機会に話します。これらの特定のプログレス バーについては、今のところ div/span が重要です。

<meter>ブラウザーは、およびの新しい HTML5 標準タグを受け入れる準備ができていないようです<progress>。そうは言っても、人々は未来に向かってまっすぐに進みたいという欲求を乗り越えて、追って通知があるまで視覚的に機能するものを選ぶことをお勧めします. また、現時点で、これらのタグの現在のブラウザー サポートは 53%であることも言及しておく必要があります。

于 2013-02-04T00:54:39.790 に答える
4

メーター要素は、使用しているプラ​​ットフォームの他の場所で使用されているプログレスバーのように見えます。メーター要素を置き換えるためにこれを試してください：

<div style="padding:2px;background:#CCC;">
  <div style="width:25%;background:#F00;text-align:center;">
    <span>25%</span>
  </div>
</div>
于 2011-11-13T12:35:10.793 に答える
0

CSS で次のようなものを使用して、メーターのサイズと位置をスタイルできます。

meter {
    margin: 0 auto 4.5em;
    width: 450px;
    height: 50px;
    display: block;
}

色については、ブラウザに適した Webkit を使用する必要があります。

于 2018-06-14T12:19:00.480 に答える