From 12aefe25ef3ffacccc4b9dac6046c4e82de0ad3c Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 3 Jan 2022 23:39:06 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/_colon_enabled/index.md | 120 ++++++++++++------------------- 1 file changed, 47 insertions(+), 73 deletions(-) (limited to 'files') diff --git a/files/ja/web/css/_colon_enabled/index.md b/files/ja/web/css/_colon_enabled/index.md index cfdea7d649..775c038da7 100644 --- a/files/ja/web/css/_colon_enabled/index.md +++ b/files/ja/web/css/_colon_enabled/index.md @@ -1,99 +1,73 @@ --- title: ':enabled' -slug: 'Web/CSS/:enabled' +slug: Web/CSS/:enabled tags: - CSS - - Layout - - Pseudo-class - - Reference - - Selector - - Web -translation_of: 'Web/CSS/:enabled' + - レイアウト + - 擬似クラス + - リファレンス + - セレクター + - ウェブ +browser-compat: css.selectors.enabled +translation_of: Web/CSS/:enabled --- -
{{CSSRef}}
+{{CSSRef}} -

:enabled は CSS の擬似クラスで、すべての有効な要素を表します。有効な要素とは、アクティブ化 (選択、クリック、入力など) したりフォーカスを得たりすることができるものです。要素には無効な状態、つまりアクティブ化したりフォーカスを得たりすることができない状態もあります。

+**`:enabled`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、すべての有効な要素を表します。有効な要素とは、アクティブ化 (選択、クリック、入力など) したりフォーカスを得たりすることができるものです。要素には無効な状態、つまりアクティブ化したりフォーカスを得たりすることができない状態もあります。 -
/* 有効な <input> を選択 */
+```css
+/* 有効な  を選択 */
 input:enabled {
   color: blue;
-}
+} +``` -

構文

+## 構文 {{csssyntax}} -

例

+## 例 -

以下の例は有効なときに文字列の色とボタンの {{htmlElement("input")}} を緑色にし、無効な時に灰色にします。これでユーザーは要素が操作できるかどうかを知るのに役立ちます。

+以下の例は有効なときに文字列の色とボタンの {{htmlElement("input")}} を緑色にし、無効な時に灰色にします。これでユーザーは要素が操作できるかどうかを知るのに役立ちます。 -

HTML

+### HTML -
<form action="url_of_form">
-  <label for="FirstField">First field (enabled):</label>
-  <input type="text" id="FirstField" value="Lorem"><br>
+```html
+

+  
+  

 
-  <label for="SecondField">Second field (disabled):</label>
-  <input type="text" id="SecondField" value="Ipsum" disabled="disabled"><br>
+  
+  

 
-  <input type="button" value="Submit">
-</form>
+ + +``` -

CSS

+### CSS -
input:enabled {
+```css
+input:enabled {
   color: #2b2;
 }
 
 input:disabled {
   color: #aaa;
 }
-
- -

結果

- -

{{EmbedLiveSample("Examples", 550, 95)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('HTML WHATWG', '#selector-enabled', ':enabled')}}{{Spec2('HTML WHATWG')}}変更なし。
{{SpecName('HTML5 W3C', '#selector-enabled', ':enabled')}}{{Spec2('HTML5 W3C')}}HTML に関する意味を定義。
{{SpecName('CSS4 Selectors', '#enableddisabled', ':enabled')}}{{Spec2('CSS4 Selectors')}}変更なし。
{{SpecName('CSS3 Selectors', '#enableddisabled', ':enabled')}}{{Spec2('CSS3 Selectors')}}擬似クラスを定義。ただし意味の結びつけの定義はなし。
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - +``` + +### 結果 + +{{EmbedLiveSample("Examples", 550, 95)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{Cssxref(":disabled")}} -- cgit v1.2.3-54-g00ecf