-
打开你的项目中的样式文件,通常是一个 SCSS 或 CSS 文件。
-
使用
::v-deep
选择器来覆盖 Element UI 的默认样式,添加以下代码:::v-deep .el-radio__inner { border: 1px solid #dcdfe6; border-radius: 2px; width: 14px; height: 14px; background-color: #fff; cursor: pointer; box-sizing: border-box; }
-
如果需要调整文字和单选框之间的距离,可以添加以下代码:
::v-deep .el-radio__label { padding-left: 5px; }
-
使用以下代码将选中状态的图标改为对钩形式:
::v-deep .el-radio__input.is-checked .el-radio__inner::after { content: ''; width: 8px; height: 5px; border: 2px solid white; border-top: transparent; border-right: transparent; text-align: center; display: block; position: absolute; top: 2px; left: 2px; transform: rotate(-45deg); border-radius: 0px; background: none; }
-
如果需要改变选中状态的背景色,可以添加以下代码:
::v-deep .el-radio__input.is-checked .el-radio__inner { background: #3F68FF; }
-
如果需要改变选中状态的文字颜色,可以添加以下代码:
::v-deep .el-radio__input.is-checked+.el-radio__label { color: #3F68FF; }
完成以上步骤后,保存文件并重新编译你的项目,即可将 Element UI 的单选框图标改为方框对号形式。