HTML での Progress のスタイルをカスタマイズする

Progress 要素は、HTML5 標準ドラフトに新しく追加された 要素の 1 つです。この要素の W3C の定義については、ここをクリックしてください。デフォルトでは、Progress はシステムのデフォルト スタイルと同じ 進行状況バー を生成します。 Webkit の Progress のデフォルトのスタイル定義はここにあります。 Windows 7 と MaxOS Lion での表示効果は次のとおりです。

これは非常に良く見えますが、Windows XP で実行している場合はどうなるでしょうか?このことを考えるだけでも頭が痛くなりますが、一貫性を保つために、多くの場合、この進行状況バーのスタイルを制御できるようにしたいことは言うまでもありません。

Webkit プロジェクトの要素 Progress の定義を確認しました。Progress はレンダリング時に次の構造に解析されます:

<progress>
    ┗ <p> ::-webkit-progress-bar
         ┗ <p>::-webkit-progress-value

2 つの疑似要素::-webkit-progress-bar および ::-webkit-progress-value シンボルによって選択されます。 (以前の疑似要素の名前は::-webkit-progress-bar-value でしたが、今年前半のパッチにより現在はこれに変更されています。ここで Chromium の関連する問題を確認できます)。最初のレイヤーと 2 番目のレイヤーの 2 つの P のスタイル。

例:

progress {
    border-radius: 2px;
    border-left: 1px #ccc solid;
    border-right: 1px #ccc solid;
    border-top: 1px #aaa solid;
    background-color: #eee;
}
 
progress::-webkit-progress-bar {
    background-color: #d7d7d7;
}
 
progress::-webkit-progress-value {
    background-color: #aadd6a;
}

上記の CSS は、次の効果を持つプログレス バーを定義できます:

CSS

アニメーション、背景写真、その他の機能もサポートしているため、完全にパーソナライズされたものを作成できますニーズに応じてプログレスバーを表示します。さらに、Gecko コア ブラウザでも、同様の pseudo-element::-moz-progress-bar を通じて同じ効果を実現できます。この要素はすべての IE システムでサポートされているわけではありません (これは当然のことです)。

以上がHTML での Progress のスタイルをカスタマイズするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。