HTML5の進行状況タグで進行状況バーの色を変更するにはどうすればよいですか?プログレスプログレスバーの詳しい説明-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTML5の進行状況タグで進行状況バーの色を変更するにはどうすればよいですか?プログレスプログレスバーの詳しい説明

寻∝梦

Sep 04, 2018 am 10:39 AM

html5 progress

この記事では、html5 の新しいプログレスプログレスバータグのスタイル分析を紹介し、html5 プログレスタグを使用してプログレスバーの色を変更する方法を説明します。次に、この記事を一緒に読んでみましょう

まず、HTML5 の進捗タグの概要を理解しましょう:

progress は HTML5 の新しい要素であり、プログレスバーを定義することを意味します。ファイルのアップロードとファイルのダウンロードの進行状況を表示し、読み込みステータスバーとしても使用できます。

ヒント: タスクの進行状況を表示するには、タグを JavaScript とともに使用してください。

注: タグは、メトリクス (ディスク容量の使用量やクエリ結果など) を表すのには適していません。度量衡を表すには、代わりにタグを使用します。

html5 進捗状況バーの構文:

<progress value=&#39;70&#39; max=&#39;100&#39;></progress>

ログイン後にコピー

HTML5 進捗タグの例を準備しましょう:

<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style type="text/css">
progress{
        width: 168px;
    height: 5px;
}
progress::-webkit-progress-bar
{
       background-color:#d7d7d7;
}
progress::-webkit-progress-value
{
     background-color:orange;
}
</style>
</head>
<body>
<progress value="100" max="100" class="hot">
</body>
</html>

ログイン後にコピー

説明、Chrome ブラウザでは、進捗状況は次の構造で表示されます

progress

:- webkit- progress-bar すべての進捗状況

:-webkit-progress-value 完了した進捗状況

これら 2 つの疑似要素を通じてスタイルを追加します。

ただし、IE10 などの他のブラウザでは異なります。これら 2 つの疑似要素は機能しません。カラースタイルを直接使用して、完了した進行状況の色を変更でき、進行状況全体が背景に表示されます

progress-bar FireFox では完了した進行状況を指し、Opera ではこのスタイルはブラウザーのデフォルトスタイルのみを指します。

したがって、互換性の記述方法は次のように考えることができます:

progress
{
   color:orange; /*兼容IE10的已完成进度背景*/
   border:none;
   background:#d7d7d7;/*这个属性也可当作Chrome的已完成进度背景，只不过被下面的::progress-bar覆盖了*/      
}
progress::-webkit-progress-bar
{
   background:#d7d7d7;
}
progress::-webkit-progress-value,
progress::-moz-progress-bar
{
     background:orange;
}

ログイン後にコピー

上記はプログレスバーのカラーCSSスタイルに関するコードであり、表示効果は次のとおりです:

HTML5の進行状況タグで進行状況バーの色を変更するにはどうすればよいですか?プログレスプログレスバーの詳しい説明