CSS - 伪类 :enabled



CSS 伪类选择器 :enabled 表示已启用的元素。如果可以激活(选择、单击、键入等),则元素处于启用状态。或接受焦点。

语法


:enabled{
		 	/* ... */
}

CSS :enabled 示例

下面是一个示例,演示了 :enabled 伪类的使用。在这里,我们看到前两个输入框已启用或处于活动状态。


<html>
<head>
<style>
		 	input[type=text]:enabled {
		 			 	background: white;
		 	}

		 	input[type=text]:disabled {
		 			 	background: lightgrey;
		 	}

		 	input {
		 			 	width: 150px;
		 			 	padding-left: 10px;
		 			 	margin-top: 10px;
		 			 	border: 1px solid black;
		 	}

	 	form {
	 	 	 border: 2px solid black;
	 	 	 width: 300px;
	 	 	 padding: 10px;
	 	}
</style>
</head>
<body>
		 	<h2>:enabled example</h2>
		 	<form action="">
	 	 	 <label>First Name</label>
	 	 	 <input type="text"><br>
	 	 	 <label>Last Name</label>
	 	 	 <input type="text"><br>
	 	 	 <label>Address</label>
	 	 	 <input type="text" disabled="disabled" value="Address"><br><br>
	 	 	 <button type="submit" disabled="disabled">Submit</button>
	 	 	 <button type="reset">Reset</button>
		 	</form>
</body>
</html>