如何解决元素 UI 更改 el-radio 的文本颜色
我需要将 :checked 文本颜色的默认值更改为红色 #f10606
var Main = {
data () {
return {
formradio: ''
};
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
@import url("//unpkg.com/element-ui@2.4.3/lib/theme-chalk/index.css");
.el-radio__input.is-checked+.el-radio__label {
color: #f10606;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
<template>
<el-radio-group v-model="formradio">
<el-radio label="option1"> Option 1 </el-radio>
<el-radio label="option2"> Option 2 </el-radio>
</el-radio-group>
</template>
</div>
但我尝试这种风格它不起作用
<style lang="scss" scoped>
.el-radio__input.is-checked+.el-radio__label {
color: #f10606;
}
我从 chrome 中检查了这种样式。
解决方法
您可以使用 !important
:
.el-radio__input.is-checked + .el-radio__label {
color: #000000 !important;
}
或者使用更具体的选择器,例如通过在组上放置一个类:
<el-radio-group v-model="form-radio" class="myradiogroup">
<el-radio label="option1"> Option 1 </el-radio>
<el-radio label="option2"> Option 2 </el-radio>
</el-radio-group>
.myradiogroup .el-radio__input.is-checked + .el-radio__label {
color: #000000;
}
如果问题与范围样式有关,请使用深 >>>
或 ::v-deep
选择器:
>>> .el-radio__input.is-checked + .el-radio__label {
color: #000000;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。