在前端页面开发中，表单元素经常会遇到需要设置为禁用状态的场景，比如提交按钮在表单未填写完整时不可点击，或者某些只读的输入框不允许用户修改内容。默认的禁用样式通常是灰色的背景和文字，往往和页面的整体设计风格不匹配，这时候就可以使用CSS的:disabled伪类选择器来修改禁用表单元素的样式。
:disabled伪类选择器的基本介绍
:disabled是CSS提供的伪类选择器，它可以匹配所有处于禁用状态的元素，主要用于表单相关元素。当表单元素的disabled属性被设置时，该元素就会被:disabled伪类选中，开发者可以针对这些元素编写特定的样式规则。
需要注意的是，:disabled伪类只适用于支持disabled属性的HTML元素，常见的包括<input>、<button>、<select>、<textarea>、<option>、<optgroup>等，普通的非表单元素设置disabled属性也不会被该伪类匹配。
:disabled伪类的基本语法
使用:disabled伪类的语法和普通的CSS选择器类似，主要有两种常见的写法：
- 单独使用：直接写
:disabled，会匹配页面中所有处于禁用状态的元素 - 结合元素使用：比如
input:disabled，只会匹配处于禁用状态的<input>元素，范围更精准
常见表单元素的样式修改示例
修改禁用输入框的样式
默认的禁用输入框背景是浅灰色，文字颜色较深，我们可以通过:disabled伪类修改它的背景、文字颜色、边框等属性。
/* 修改所有禁用输入框的样式 */
input:disabled {
background-color: #f5f5f5;
color: #999999;
border: 1px solid #dddddd;
cursor: not-allowed;
}
/* 单独修改文本框类型的禁用输入框 */
input[type="text"]:disabled {
padding: 8px 12px;
border-radius: 4px;
}
对应的HTML代码如下：
<input type="text" placeholder="可输入的文本框"> <input type="text" placeholder="禁用的文本框" disabled>
修改禁用按钮的样式
按钮禁用后默认的样式比较生硬，我们可以调整它的背景色、文字颜色，还可以去掉点击时的默认效果。
/* 修改禁用按钮的样式 */
button:disabled {
background-color: #cccccc;
color: #666666;
border: none;
opacity: 0.7;
}
/* 鼠标 hover 到禁用按钮上时的样式，避免显示可点击效果 */
button:disabled:hover {
background-color: #cccccc;
cursor: not-allowed;
}
对应的HTML代码：
<button>可点击按钮</button> <button disabled>禁用按钮</button>
修改禁用下拉选择框的样式
下拉选择框禁用后也可以自定义样式，不过部分浏览器对<select>元素的样式支持有限，我们可以修改背景和文字颜色来适配设计。
select:disabled {
background-color: #f0f0f0;
color: #888888;
border: 1px solid #e0e0e0;
}
对应的HTML代码：
<select>
<option>选项一</option>
<option>选项二</option>
</select>
<select disabled>
<option>禁用选项一</option>
<option>禁用选项二</option>
</select>
使用:disabled伪类的注意事项
- disabled属性和readonly属性的区别：设置readonly的表单元素仍然可以被:disabled伪类匹配吗？答案是不能，:disabled只匹配设置了disabled属性的元素，readonly属性对应的元素需要用
:read-only伪类来匹配。 - 样式优先级问题：如果之前已经给表单元素写了普通样式，:disabled伪类的样式需要保证优先级足够，必要时可以结合元素类型、id或class来提升优先级。
- 浏览器兼容性：:disabled伪类在主流的现代浏览器中都有很好的支持，包括Chrome、Firefox、Safari、Edge等，基本不需要考虑兼容性问题。
- 不要试图用:disabled伪类修改不支持disabled属性的元素样式，比如<div>、<span>等元素，即使给它们加上disabled属性，也不会生效。
总结
使用:disabled伪类选择器修改禁用表单元素的样式是非常简单且实用的方法，只需要掌握它的基本语法，结合具体的表单元素编写对应的CSS规则即可。在实际开发中，我们可以根据页面的设计需求，灵活调整禁用元素的背景、文字、边框、鼠标样式等属性，让禁用状态的元素和整体页面风格保持一致，提升用户的使用体验。
CSS:disabled伪类表单样式前端开发禁用元素样式修改时间：2026-06-21 01:36:36