修改el-input、textarea、el-checkbox的禁用状态下的颜色

原创已于 2024-11-22 10:50:56 修改 · 6.2k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #elementui

于 2022-02-25 17:55:30 首次发布

本文档详细介绍了如何在全局样式中为ECharts组件的checkbox和输入框（包括textarea）设置禁用状态下的颜色变化，包括文字、背景和边框的修改，适用于前端开发者进行无障碍设计和交互优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注意要加到全局文件样式里面

//checkBox自定义禁用样式
.el-checkbox__input.is-disabled + .el-checkbox__label {
  color: #808080 !important;
}

.el-checkbox__input.is-disabled.is-checked + .el-checkbox__label {
  color: #1890ff !important;
}

.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
  background-color: #1890ff !important;
  border-color: #1890ff !important;
}

//输入框 还有 textarea 禁用状态下颜色改变
.el-input.is-disabled .el-input__inner,.el-textarea.is-disabled .el-textarea__inner{
  color: #606266 !important;
}