ホームページ > 記事 > ウェブフロントエンド > HTML5の進行状況タグで進行状況バーの色を変更するにはどうすればよいですか?プログレスプログレスバーの詳しい説明
HTML5の進行状況タグで進行状況バーの色を変更するにはどうすればよいですか?プログレスプログレスバーの詳しい説明
- 寻∝梦オリジナル
- 2018-09-04 10:39:3816373ブラウズ
この記事では、html5 の新しいプログレス プログレス バー タグのスタイル分析を紹介し、html5 プログレス タグを使用してプログレス バーの色を変更する方法を説明します。次に、この記事を一緒に読んでみましょう
まず、HTML5 の進捗タグの概要を理解しましょう:
progress は HTML5 の新しい要素であり、プログレス バーを定義することを意味します。ファイルのアップロードとファイルのダウンロードの進行状況を表示し、読み込みステータス バーとしても使用できます。
ヒント: タスクの進行状況を表示するには、
注:
html5 進捗状況バーの構文:
<progress value='70' max='100'></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 の新しい進歩についてです。タグの使用方法と記事の色の変更方法についてご質問がありましたら、以下よりお問い合わせください。
【編集者のおすすめ】
html5ヘッダータグの使い方は？ html5ヘッダータグの役割紹介
htmlのincludeタグとは？ html include は設定解析を実装します
以上がHTML5の進行状況タグで進行状況バーの色を変更するにはどうすればよいですか?プログレスプログレスバーの詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。