From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/_colon_indeterminate/index.html | 142 +++++++++++++++++++++++ 1 file changed, 142 insertions(+) create mode 100644 files/ja/web/css/_colon_indeterminate/index.html (limited to 'files/ja/web/css/_colon_indeterminate/index.html') diff --git a/files/ja/web/css/_colon_indeterminate/index.html b/files/ja/web/css/_colon_indeterminate/index.html new file mode 100644 index 0000000000..6a444e188a --- /dev/null +++ b/files/ja/web/css/_colon_indeterminate/index.html @@ -0,0 +1,142 @@ +--- +title: ':indeterminate' +slug: 'Web/CSS/:indeterminate' +tags: + - ':indeterminate' + - CSS + - Layout + - Pseudo-class + - Reference + - Selector + - Web + - checkbox + - progress + - radio button +translation_of: 'Web/CSS/:indeterminate' +--- +
{{CSSRef}}
+ +

:indeterminate は CSS の擬似クラスセレクターで、未確定の状態にあるフォーム要素を表します。例えばチェックボックスで HTML の indeterminate 属性が true に設定されたもの、ラジオボタンでグループ内がすべて選択されていないもの、 {{HTMLElement("progress")}} 要素で中間の状態などです。

+ +
/* 中間の状態にある <input> をすべて選択 */
+input:indeterminate {
+  background: lime;
+}
+ +

このセレクターが対象とする要素は以下の通りです。

+ + + +

構文

+ +
{{csssyntax}}
+ +

例

+ +

チェックボックスとラジオボタン

+ +

この例では中間の状態にあるフォームの要素に特殊なスタイルを適用します。

+ +

HTML

+ +
<div>
+  <input type="checkbox" id="checkbox">
+  <label for="checkbox">背景が緑色になるはずです</label>
+</div>
+<div>
+  <input type="radio" id="radio">
+  <label for="radio">背景が緑色になるはずです</label>
+</div>
+ +

CSS

+ +
input:indeterminate + label {
+  background: lime;
+}
+
+ +

JavaScript

+ +
var inputs = document.getElementsByTagName("input");
+
+for (var i = 0; i < inputs.length; i++) {
+  inputs[i].indeterminate = true;
+}
+
+ +

{{EmbedLiveSample('Checkbox_radio_button', 'auto', 50)}}

+ +

プログレスバー

+ +

HTML

+ +
<progress>
+
+ +

CSS

+ +
progress {
+  margin: 4px;
+}
+
+progress:indeterminate {
+  opacity: 0.5;
+  background-color: lightgray;
+  box-shadow: 0 0 2px 1px red;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Progress_bar', 'auto', 30)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', '#selector-indeterminate', ':indeterminate')}}{{Spec2('HTML WHATWG')}}変更なし。
{{SpecName('HTML5 W3C', '#selector-indeterminate', ':indeterminate')}}{{Spec2('HTML5 W3C')}}HTML における意味論と制約検証の定義。
{{SpecName('CSS4 Selectors', '#indeterminate', ':indeterminate')}}{{Spec2('CSS4 Selectors')}}変更なし。
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("css.selectors.indeterminate")}}

+ +

関連情報

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