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/zh-cn/web/css/_colon_enabled/index.html | 101 ++++++++++++++++++++++++++ 1 file changed, 101 insertions(+) create mode 100644 files/zh-cn/web/css/_colon_enabled/index.html (limited to 'files/zh-cn/web/css/_colon_enabled/index.html') diff --git a/files/zh-cn/web/css/_colon_enabled/index.html b/files/zh-cn/web/css/_colon_enabled/index.html new file mode 100644 index 0000000000..ac57afafaf --- /dev/null +++ b/files/zh-cn/web/css/_colon_enabled/index.html @@ -0,0 +1,101 @@ +--- +title: ':enabled' +slug: 'Web/CSS/:enabled' +tags: + - CSS + - Reference + - Web + - 伪类 + - 参考 + - 布局 +translation_of: 'Web/CSS/:enabled' +--- +
{{CSSRef}}
+ +

CSS 伪类 :enabled 表示任何被启用的(enabled)元素。如果一个元素能够被激活(如选择、点击或接受文本输入),或者能够获取焦点,则该元素是启用的。元素也有一个禁用的状态(disabled state),在被禁用时,元素不能被激活或获取焦点。

+ +
/* 选择任何启用状态的 <input> */
+input:enabled {
+  color: blue;
+}
+ +

语法

+ +
{{csssyntax}}
+ +

示例

+ +

下面的代码,当文本输入框处于启用状态时,输入框 {{htmlElement("input")}} 的文本是绿色的,处于禁用状态时,输入框的文本则是灰色的。这样可以把元素是否可用反馈给用户。

+ +

HTML:

+ +
<form action="url_of_form">
+  <label for="FirstField">First field (enabled):</label>
+  <input type="text" id="FirstField" value="Lorem"><br>
+
+  <label for="SecondField">Second field (disabled):</label>
+  <input type="text" id="SecondField" value="Ipsum" disabled="disabled"><br>
+
+  <input type="button" value="Submit">
+</form>
+ +

CSS:

+ +
input:enabled {
+  color: #2b2;
+}
+
+input:disabled {
+  color: #aaa;
+}
+
+ +

结果

+ +
{{EmbedLiveSample("Enabled_Disabled_Inputs_Example",550,95)}}
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('HTML WHATWG', '#selector-enabled', ':enabled')}}{{Spec2('HTML WHATWG')}}No change.
{{SpecName('HTML5 W3C', '#selector-enabled', ':enabled')}}{{Spec2('HTML5 W3C')}}Defines the semantics for HTML and forms.
{{SpecName('CSS4 Selectors', '#enableddisabled', ':enabled')}}{{Spec2('CSS4 Selectors')}}No change.
{{SpecName('CSS3 Selectors', '#enableddisabled', ':enabled')}}{{Spec2('CSS3 Selectors')}}Defines the pseudo-class, but not the associated semantics.
+ +

浏览器兼容性

+ + + +

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

+ +

参见

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