Element UI非活性时（Disabled），改变字体颜色

最新推荐文章于 2024-09-09 16:03:19 发布

goldvale

最新推荐文章于 2024-09-09 16:03:19 发布

阅读量4.1k

点赞数 6

CC 4.0 BY-SA版权

分类专栏： element UI 文章标签： ui vue.js 前端

本文链接：https://blog.youkuaiyun.com/goldvale/article/details/128014795

element UI 专栏收录该内容

3 篇文章

订阅专栏

这篇博客分享了解决ElementUI组件在禁用（Disabled）状态下字体颜色过淡，导致显示不清的问题。通过添加自定义CSS样式，可以将字体颜色调整为#606266，涉及的组件包括：复选框、单选按钮和输入框等。

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

Element UI组件在非活性时（Disabled)，字体颜色太淡，显示不清楚，加上以下样式，就可以改变字体颜色了。

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

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

.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner:after {
    border-color: #606266 !important;
}

.el-radio__input.is-disabled + span.el-radio__label {
    color: #606266 !important;
}

.el-radio__input.is-disabled.is-checked .el-radio__inner::after {
    background-color: #606266 !important;
}

.el-radio__input.is-disabled .el-radio__inner, .el-radio__input.is-disabled.is-checked .el-radio__inner {
    border-color: #606266 !important;
}

.el-input.is-disabled .el-input__inner, textarea:disabled {
    color: #606266 !important;
}

.el-range-editor.is-disabled input {
    color: #606266 !important;
}