4.1 伪类 :checked
CSS中的表单伪类为根据状态对表单元素进行样式化提供了可能。这些伪类可以创建交互式和易访问的表单，提升用户界面和体验。 我们来仔细看看伪类 :checked, :disabled, :enabled 和 :invalid。
伪类 :checked 应用于处于“选中”状态的表单元素。这适用于复选框 (<input type="checkbox">), 单选按钮 (<input type="radio">) 和选项 (<option>)。
语法:
选择器:checked {
属性: 值;
}
使用示例
在这个例子中，选中的复选框、单选按钮和选项在“选中”状态下会获得相应的背景颜色：
CSS
/* 选中复选框的样式 */
input[type="checkbox"]:checked {
background-color: #3498db;
}
/* 选中单选按钮的样式 */
input[type="radio"]:checked {
background-color: #2ecc71;
}
/* 选中选项的样式 */
option:checked {
background-color: #e74c3c;
}
4.2 伪类 :disabled
伪类 :disabled 应用于处于禁用状态的表单元素。这对于对暂时不可交互的元素进行样式化很有用。
语法:
选择器:disabled {
属性: 值;
}
使用示例
在这个例子中，禁用的输入字段和按钮获得相应的背景颜色、边框和文字颜色， 并将光标更改为“禁止”：
CSS
/* 禁用输入字段的样式 */
input:disabled {
background-color: #f0f0f0;
border-color: #ccc;
color: #888;
}
/* 禁用按钮的样式 */
button:disabled {
background-color: #d0d0d0;
color: #777;
cursor: not-allowed;
}
4.3 伪类 :enabled
伪类 :enabled 应用于处于启用状态的表单元素。 这允许对可交互的元素进行样式化。
语法:
选择器:enabled {
属性: 值;
}
使用示例
在这个例子中，启用的输入字段和按钮获得相应的背景颜色、边框和文字颜色，并将光标更改为“指示器”：
CSS
/* 启用输入字段的样式 */
input:enabled {
background-color: #fff;
border-color: #3498db;
}
/* 启用按钮的样式 */
button:enabled {
background-color: #2ecc71;
color: white;
cursor: pointer;
}
4.4 伪类 :invalid
伪类 :invalid 应用于未通过验证的表单元素。这允许对包含不正确数据的输入字段进行样式化。
语法:
选择器:invalid {
属性: 值;
}
使用示例
在这个例子中，不正确的输入字段和文本域获得相应的边框和背景颜色，以视觉上显示数据未通过验证：
CSS
/* 不正确输入字段的样式 */
input:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
/* 不正确文本域的样式 */
textarea:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
4.5 完整实现示例
CSS
/* 选中复选框的样式 */
input[type="checkbox"]:checked {
background-color: #3498db;
}
/* 选中单选按钮的样式 */
input[type="radio"]:checked {
background-color: #2ecc71;
}
/* 禁用输入字段的样式 */
input:disabled {
background-color: #f0f0f0;
border-color: #ccc;
color: #888;
}
/* 禁用按钮的样式 */
button:disabled {
background-color: #d0d0d0;
color: #777;
cursor: not-allowed;
}
/* 启用输入字段的样式 */
input:enabled {
background-color: #fff;
border-color: #3498db;
}
/* 启用按钮的样式 */
button:enabled {
background-color: #2ecc71;
color: white;
cursor: pointer;
}
/* 不正确输入字段的样式 */
input:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
/* 不正确文本域的样式 */
textarea:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单伪类示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form>
<label>
<input type="checkbox" name="option1"> Option 1
</label>
<br>
<label>
<input type="radio" name="choice" value="1"> Choice 1
</label>
<label>
<input type="radio" name="choice" value="2"> Choice 2
</label>
<br>
<input type="text" placeholder="Enter your name" required>
<br>
<input type="email" placeholder="Enter your email" required>
<br>
<button type="submit">Submit</button>
<button type="button" disabled>Disabled Button</button>
</form>
</body>
</html>
GO TO FULL VERSION