From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../_doublecolon_-webkit-progress-value/index.html | 66 ++++++++++++++++++++++ 1 file changed, 66 insertions(+) create mode 100644 files/ja/web/css/_doublecolon_-webkit-progress-value/index.html (limited to 'files/ja/web/css/_doublecolon_-webkit-progress-value') diff --git a/files/ja/web/css/_doublecolon_-webkit-progress-value/index.html b/files/ja/web/css/_doublecolon_-webkit-progress-value/index.html new file mode 100644 index 0000000000..b74c075dd6 --- /dev/null +++ b/files/ja/web/css/_doublecolon_-webkit-progress-value/index.html @@ -0,0 +1,66 @@ +--- +title: '::-webkit-progress-value' +slug: 'Web/CSS/::-webkit-progress-value' +tags: + - CSS + - Reference + - Selector + - 疑似要素 + - 非標準 +translation_of: 'Web/CSS/::-webkit-progress-value' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

::-webkit-progress-value CSS 疑似要素 は、 {{HTMLElement("progress")}} 要素のバーの塗りつぶされた部分を表します。これは、 {{cssxref("::-webkit-progress-bar")}} 疑似要素の子要素です。

+ +
+

Note: ::-webkit-progress-value を有効にするには {{cssxref("-webkit-appearance")}} を <progress> 要素で none に設定する必要があります。

+
+ +

仕様

+ +

仕様の一部ではありません。これは、 WebKit/Blink に固有の独自疑似要素です。

+ +

+ +

HTML

+ +
<progress value="10" max="50">
+
+ +

CSS

+ +
progress {
+  -webkit-appearance: none;
+}
+
+::-webkit-progress-value {
+  background-color: orange;
+}
+ +

Result

+ +

{{EmbedLiveSample("Example", 200, 50)}}

+ +

上記のスタイルを使用したプログレスバーは次のようになります:

+ +

+ +

ブラウザーの実装状況

+ + + +

{{Compat("css.selectors.-webkit-progress-value")}}

+ +

関連項目

+ + -- cgit v1.2.3-54-g00ecf