使用:disabled伪类可自定义禁用按钮样式，如设置背景色、文字颜色等；需确保选择器优先级足够以覆盖原有样式，推荐使用具体选择器如.btn:disabled，并测试多浏览器兼容性；该方法同样适用于input[type="button"]等其他按钮类型。
在CSS中，当按钮设置 disabled 属性后，默认样式由浏览器控制，直接使用 :disabled 伪类可以自定义其外观，比如背景色和文字颜色。
使用 :disabled 伪类自定义禁用按钮样式
通过 :disabled 可以选中被禁用的按钮元素，并为其设置自定义样式。注意：:disabled 是作用于元素本身的伪类，不是子元素或容器。
button:disabled {
background-color: #cccccc;
color: #666666;
border: 1px solid #999999;
cursor: not-allowed;
}
这样可以让禁用状态的按钮显示为灰色背景和浅灰色文字，提升界面一致性。
确保选择器优先级足够
如果按钮原本有较强的样式（比如通过 class 定义），需要确保 :disabled 的规则能覆盖原有样式。
立即学习“前端免费学习笔记（深入）”；
建议写法：- 使用更具体的选择器，例如：
.btn:disabled - 避免使用
!important，但在必要时可临时使用 - 测试不同浏览器下的表现，保持兼容性
对 input[type="button"] 和其他按钮类型同样适用
不只是 ， 或 也可以用相同方式设置：
input:disabled {
background-color: #f0f0f0;
color: #888;
}
基本上就这些。只要正确使用 :disabled 并确保样式优先级，就能轻松自定义禁用按钮的视觉效果。
