问题描述
我需要将 :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;
}