HTML中样式启用设置与enabled伪类用法详解
在HTML页面开发中，我们经常需要根据表单元素的状态来调整样式，比如禁用状态的输入框显示为灰色，可用状态的输入框显示为白色。enabled伪类就是用来选中处于可用状态的表单元素的CSS选择器，合理运用它可以让页面交互状态更清晰，提升用户体验。
一、HTML元素启用状态的基础设置
HTML中大部分表单元素默认处于启用（可用）状态，用户可以直接进行输入、点击等操作。如果需要禁用某个元素，需要手动添加disabled属性，没有添加该属性的表单元素默认就是启用状态。
常见的可设置启用/禁用状态的表单元素包括<input>、<textarea>、<select>、<button>等，下面通过一个基础示例展示默认启用状态的元素：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>表单元素启用状态示例</title> </head> <body> <!-- 默认启用的输入框 --> <p>用户名：<input type="text" placeholder="请输入用户名"></p> <!-- 禁用的输入框 --> <p>密码：<input type="password" placeholder="请输入密码" disabled></p> <!-- 默认启用的按钮 --> <p><button type="submit">提交</button></p> <!-- 禁用的按钮 --> <p><button type="reset" disabled>重置</button></p> </body> </html>
上述代码中，没有添加disabled属性的<input>和<button>都是启用状态，用户可以正常输入内容和点击按钮；添加了disabled属性的元素则处于禁用状态，无法交互，且浏览器会默认给禁用元素添加灰色背景等样式。
二、enabled伪类的基本用法
enabled是CSS3引入的动态伪类选择器，用于匹配处于启用状态的用户界面元素，也就是没有被设置disabled属性的表单相关元素。它的语法非常简单，直接跟在需要选择的元素后面即可。
2.1 基础语法
类的基本语法格式如下：
/* 选中所有处于启用状态的input元素 */
input:enabled {
样式属性: 属性值;
}
/* 选中所有处于启用状态的button元素 */
button:enabled {
样式属性: 属性值;
}
/* 也可以组合选择，选中所有启用状态的表单元素 */
:enabled {
样式属性: 属性值;
}2.2 基础示例：区分启用和禁用元素样式
我们可以通过enabled伪类和disabled伪类配合使用，分别为启用和禁用的表单元素设置不同的样式，让页面状态更直观。下面的示例会给启用状态的输入框添加浅绿色背景，禁用状态的输入框添加浅灰色背景：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>enabled伪类基础示例</title>
<style>
/* 启用状态的输入框样式 */
input:enabled {
background-color: #f0fff0;
border: 1px solid #2e8b57;
padding: 8px;
width: 200px;
}
/* 禁用状态的输入框样式 */
input:disabled {
background-color: #f5f5f5;
border: 1px solid #ccc;
padding: 8px;
width: 200px;
cursor: not-allowed;
}
p {
margin: 10px 0;
}
</style>
</head>
<body>
<p>启用状态的输入框：<input type="text" placeholder="可以输入内容"></p>
<p>禁用状态的输入框：<input type="text" placeholder="无法输入内容" disabled></p>
</body>
</html>运行上述代码后，第一个输入框背景为浅绿色，边框为绿色，用户可以正常输入；第二个输入框背景为浅灰色，边框为灰色，鼠标悬停时会显示禁止图标，无法输入内容。
三、enabled伪类的高级用法
3.1 结合其他选择器使用
enabled伪类可以和其他CSS选择器组合使用，实现更精准的元素选择。比如我们可以只给类型为text的启用状态输入框设置样式，或者给特定class下的启用按钮设置样式：
/* 只选中类型为text的启用状态输入框 */
input[type="text"]:enabled {
background-color: #e6f7ff;
}
/* 选中class为operate-btn的启用状态按钮 */
button.operate-btn:enabled {
background-color: #1890ff;
color: white;
border: none;
padding: 8px 16px;
cursor: pointer;
}
/* 选中class为operate-btn的禁用状态按钮 */
button.operate-btn:disabled {
background-color: #d9d9d9;
color: #999;
border: none;
padding: 8px 16px;
cursor: not-allowed;
}3.2 动态切换启用状态的样式适配
在实际开发中，我们经常会通过JavaScript动态修改元素的disabled属性，切换元素的启用/禁用状态，此时enabled伪类和disabled伪类会自动匹配元素当前的状态，不需要额外修改CSS代码。
下面的示例实现了点击按钮切换另一个输入框的启用/禁用状态，样式会自动跟随状态变化：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>动态切换启用状态示例</title>
<style>
.target-input:enabled {
background-color: #fff7e6;
border: 1px solid #fa8c16;
}
.target-input:disabled {
background-color: #f5f5f5;
border: 1px solid #ccc;
}
.toggle-btn {
margin-top: 10px;
padding: 6px 12px;
cursor: pointer;
}
</style>
</head>
<body>
<p>输入框：<input type="text" class="target-input" placeholder="可以输入内容"></p>
<button class="toggle-btn" onclick="toggleInputState()">切换启用/禁用状态</button>
<script>
function toggleInputState() {
const input = document.querySelector('.target-input');
// 如果当前是启用状态，就设置为禁用，反之设置为启用
if (input.disabled) {
input.disabled = false;
} else {
input.disabled = true;
}
}
</script>
</body>
</html>四、enabled伪类的注意事项
enabled伪类只适用于用户界面元素，也就是可以和用户产生交互的元素，最常见的就是表单相关元素，普通的非表单元素（如<div>、<p>等）即使添加了类似启用的属性，enabled伪类也不会生效。
enabled伪类和disabled伪类是互斥的，一个元素同一时间只能处于其中一种状态，不需要额外判断。
部分旧版本的浏览器（如IE8及以下）不支持enabled伪类，如果需要兼容旧浏览器，可以通过给启用元素添加额外的class（如
enabled）来设置样式，作为降级方案。不要给启用状态的元素设置过于复杂的样式，避免影响用户正常交互，样式调整主要以区分状态、提升可读性为目的。
五、适用场景总结
enabled伪类最常见的使用场景包括：
表单页面中区分启用和禁用的输入项，让用户清晰感知可操作范围。
步骤表单中，未完成前置步骤时，后续提交按钮处于禁用状态，样式为灰色，完成前置步骤后按钮启用，样式变为高亮可点击状态。
权限控制场景中，无操作权限的表单元素设置为禁用状态，样式和普通启用元素区分开。
掌握enabled伪类的用法，可以让我们更高效地实现表单元素的状态样式管理，减少冗余的class定义，让CSS代码更简洁易维护。