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

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

原创最新推荐文章于 2024-09-09 16:03:19 发布 · 4.3k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#ui #vue.js #前端

element UI 专栏收录该内容

3 篇文章

订阅专栏

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

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;
}