element-ui复选框，选中后修改样式 _@jie

需求：复选框选中后，样式：保持正常选中，功能：禁止修改
①先设置好’选中且禁用’样式
效果：

②改变默认样式
代码如下：

<template>
	<div class="agree">
		<el-checkbox v-model="checked" disabled>
			<span style="color: #409eff">安全账号</span>
		</el-checkbox>
	</div>
</template>

<script>
  export default {
    data () {
      return {
        checked: true,
      };
    }
  };
</script>

<style>
.agree .el-checkbox .is-checked .el-checkbox__inner {
  background-color: #409eff;
  border: 1px solid #409eff;
}
.agree .el-checkbox .is-checked .el-checkbox__inner::after {
  border-color: #ffffff;
}
.agree .el-checkbox .is-checked .el-checkbox__inner span {
  color: #40adfb;
}
</style>

效果：

注意：
1、修改表单里的样式的时候不能用scoped，否则不生效
2、改复选框里面对钩的颜色要用 border-color: #xxx;去改，不能用border去改