本文主要是介绍将element-ui的单选图标改为方框对钩形式(el-radio-group),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
-
打开你的项目中的样式文件,通常是一个 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 的单选框图标改为方框对号形式。
这篇关于将element-ui的单选图标改为方框对钩形式(el-radio-group)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!