改变element单选框的样式

示例:默认的单选框的样式是这样的在这里插入图片描述
示例:我想换成图标是对钩的
在这里插入图片描述

代码如下(示例):

// 圆的改成方的
::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;
  vertical-align: middle;
  transform: rotate(-45deg);
  border-radius: 0px;
  background: none;
}

总结

提示:这里对文章进行总结

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐