el-radio的勾选样式改成对勾

可以通过设置 `el-radio` 组件的 `checked-icon` 属性来将勾选样式改成对勾。示例代码如下：

<template>
  <el-radio
    v-model="radio"
    :label="3"
    checked-icon="el-icon-circle-check"
  >
    Radio
  </el-radio>
</template>

在上面的代码中，`checked-icon` 属性设置为 `el-icon-circle-check`，表示使用 element-ui 中的对勾图标。你也可以使用其他的图标库中的对勾图标。

相关问题

el-radio-group的勾选是圆形的，改成对勾形状

可以通过修改el-radio-group的样式来实现勾选为对勾形状。具体方法是：

1. 首先，在el-radio-group所在的组件或页面中，添加下面的CSS样式：

.el-radio__inner::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  background-color: #409EFF;
  transition: all .2s;
}

.el-radio__input.is-checked .el-radio__inner::after {
  transform: translate(-50%, -50%) scale(1);
}

2. 上述样式中，`.el-radio__inner::after`是勾选的对勾样式，`.el-radio__input.is-checked .el-radio__inner::after`是选中状态下的样式。

3. 保存样式后，重新渲染页面，就会看到勾选变成了对勾形状。

注意：这种方式只是通过修改样式来实现勾选为对勾形状，不会影响el-radio-group的单选功能。

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 来隔离样式。