elementUi el-checkbox更改样式

在Element UI中，要修改el-checkbox的样式，可以通过CSS来覆盖默认的样式。由于Element UI使用了Shadow DOM来隔离组件的样式，所以需要使用特定的选择器来覆盖样式。

以下是一个简单的例子，展示如何通过外部CSS覆盖Element UI的el-checkbox样式：

<template>
  <el-checkbox class="custom-checkbox">Check me</el-checkbox>
</template>
 
<style>
/* 这将覆盖默认的el-checkbox背景颜色 */
.custom-checkbox .el-checkbox__input {
  background-color: #f00; /* 红色背景 */
}
 
/* 这将覆盖默认的el-checkbox选中时的图标颜色 */
.custom-checkbox .el-checkbox__input .el-checkbox__inner:checked::after {
  color: #fff; /* 白色选中图标 */
}
</style>

在这个例子中，.custom-checkbox 是用来指定你要修改哪个el-checkbox实例的样式。.el-checkbox__input 是用来选中复选框的外部容器，而.el-checkbox__inner:checked::after 是用来选中复选框后的选中图标。

请注意，Element UI的版本更新可能会改变类名和结构，所以覆盖的样式可能需要根据你所使用的Element UI的版本进行相应的调整。