element-ui单选框按钮的样式改成对钩

最新推荐文章于 2023-11-27 10:09:25 发布

前端小白_小小敏

最新推荐文章于 2023-11-27 10:09:25 发布

阅读量1.4k

点赞数 3

文章标签： css css3

本文链接：https://blog.csdn.net/weixin_46037501/article/details/125479472

版权

改变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;
}