el-checkbox回字框样式

### 关于 `el-checkbox` 组件的回字框样式实现 在 Element UI 中，可以通过自定义 CSS 样式来调整 `el-checkbox` 的外观。为了实现类似于“回字框”的效果，可以利用 `.el-checkbox__inner` 类选择器以及其伪类来进行样式定制。 以下是具体的实现方式： #### 修改未选中状态下的样式 通过覆盖默认的边框颜色和背景色，可以使未选中的复选框呈现特定的效果： ```css /deep/ .el-checkbox__inner { border-color: #0862a3; background-color: transparent; /* 设置透明背景 */ } ``` 此部分代码的作用是更改未选中状态下复选框的颜色[^1]。 --- #### 修改选中状态下的样式 当复选框被选中时，可以通过以下代码设置新的背景色和边框颜色： ```css /deep/ .el-checkbox__input.is-checked .el-checkbox__inner { background-color: #0862a3; border-color: #0862a3; } ``` 这段代码设置了选中后的视觉效果，使复选框看起来更像一个带有填充色的“回字框”[^1]。 --- #### 半选中状态下的样式 如果需要支持三态复选框（即半选中状态），则需额外配置如下样式： ```css .el-checkbox__input.is-indeterminate .el-checkbox__inner { background-color: #FFF !important; border: 1px solid #d1d5db !important; &::before { content: ""; position: absolute; display: block !important; background-color: #003EE5 !important; height: 16px !important; width: 16px !important; border-radius: 4px; transform-origin: center; -webkit-transform-origin: center; margin-top: -6px; margin-left: -1px; transform: translate(-50%, -50%) scale(0.5); -webkit-transform: translate(-50%, -50%) scale(0.5); transition: transform 0.15s ease-in 0.05s; -webkit-transition: -webkit-transform 0.15s ease-in 0.05s; } } ``` 这部分代码用于处理特殊场景下（如表格头部全选按钮）的半选中状态显示[^3]。 --- #### 文本样式的同步修改 为了让右侧的文字与复选框的状态保持一致，可分别针对未选中和已选中两种情况应用不同的字体颜色： ```css /deep/ .el-checkbox__label { font-size: 14px; } /deep/ .el-checkbox__input.is-checked + .el-checkbox__label { color: #0862a3; } ``` 这一步骤确保了整体设计的一致性和用户体验。 --- #### Vue 实现示例 下面是一个完整的 HTML 和 JavaScript 示例，展示如何结合以上样式完成功能开发： ```vue <template> <div> <el-checkbox v-model="checked">选项</el-checkbox> </div> </template> <script> export default { data() { return { checked: false, }; }, }; </script> <style scoped> /* 使用 /deep/ 穿透作用域 */ /deep/ .el-checkbox__inner { border-color: #0862a3; background-color: transparent; } /deep/ .el-checkbox__input.is-checked .el-checkbox__inner { background-color: #0862a3; border-color: #0862a3; } /deep/ .el-checkbox__input.is-checked + .el-checkbox__label { color: #0862a3; } </style> ``` 该模板展示了如何绑定数据模型并动态更新界面状态的同时，也实现了所需的样式变化。 --- ###