vue el-checkbox样式

Vue.js 的 `el-checkbox` 是 Element UI 提供的一个用于创建单选框组件的组件，它的基本样式主要包括外观、布局和状态改变时的反馈样式。以下是一些关键的 CSS 属性和常见样式的例子：

1. **基础样式**:
- `element-checkbox`: 这是根元素的选择器，可以用来设置全局样式。
- `.el-checkbox__input`: 输入框部分，包含勾选状态。
- `.is-checked`: 当选择框被勾选时，应用此类。

2. **默认样式**:

   .el-checkbox {
     display: inline-block;
   }
   
   .el-checkbox__input {
     position: relative;
     cursor: pointer;
   }

   .el-checkbox__inner {
     position: absolute;
     left: 0;
     top: 0;
   }

   .is-checked .el-checkbox__inner::before {
     content: '\2714';
     /* 使用字体图标显示对勾 */
   }

3. **高亮样式**:
当鼠标悬停或点击时，可以选择更改 `.el-checkbox.is-hover` 或 `.el-checkbox.is-focused` 类的样式。

4. **禁用状态**:
`.el-checkbox.is-disabled` 用于禁用状态，会降低交互效果和颜色。

5. **大小调整**:
通过 CSS 可以控制 `el-checkbox` 和其内部元素的尺寸，例如 `.el-checkbox--small` 或 `.el-checkbox--medium`。

为了更好地定制样式，你可以直接在 Vue 文件中的 `<style>` 标签内添加 scoped 模式下的样式，或者使用 CSS Modules 来隔离样式。