使用 :disabled 伪类可为禁用输入框设置样式，如 input:disabled { 背景颜色: #f2f2f2; 颜色: #666; 指针: 默认; }，适用于 input、textarea、select、button 等元素，通过调整背景色、文字色、边框和鼠标指针提升表单可用性与视觉一致性。
在css中，可以通过 :disabled 伪类选择器来为被禁用的输入框设置特定样式。当一个输入框（如 input 或 textarea）添加了 disabled 属性后，它会自动匹配 :disabled 选择器，从而应用相应的CSS规则。
基本语法
input:disabled {
背景颜色: #f2f2f2;
边框: 1px 实线 #ccc;
颜色: #666;
指针: 默认;
}
这个样式会应用于所有被禁用的 input 元素。
常见样式调整建议
- 背景颜色：通常设为浅灰色，表示不可操作
- 文字颜色：使用较暗或较淡的灰色，提升可读性同时表明禁用状态
- 边框样式：可略微变细或调低透明度
- 鼠标指针：设为
default，避免显示文本输入光标
支持的元素类型
除了 input，以下元素也可以使用 :disabled：
textarea:disabledselect:disabledbutton:disabledoptgroup:disabled
实际示例
input:disabled,
textarea:disabled {
背景颜色: #e9e9e9;
颜色: #a0a0a0;
边框颜色: #ddd;
指针: 不是允许的;
}
这样可以让用户更直观地识别哪些输入框当前无法操作。浏览器默认已有禁用样式的处理，但自定义样式能更好匹配整体设计风格。
立即学习“前端免费学习笔记（深入）”；
基本上就这些，合理使用 :disabled 能提升表单的可用性和视觉一致性。