el-radio修改成方形，选中打钩

好想。

已于 2024-01-19 09:26:03 修改

阅读量1k

点赞数

文章标签： javascript css css3

于 2023-09-11 08:14:45 首次发布

本文链接：https://blog.csdn.net/qq_44726587/article/details/132799025

版权

/deep/ .el-radio__inner {
    border-radius: 2px !important;
  }

  /deep/ .el-radio__input.is-checked .el-radio__inner::after {
    content: '';
    width: 8px;
    height: 3px;
    border: 1px solid white;
    border-top: transparent;
    border-right: transparent;
    text-align: center;
    display: block;
    position: absolute;
    top: 3px;
    left: 2px;
    transform: rotate(-45deg);
    border-radius: 0px;
    background: none;
  }

还有下面这种样式，其他样式css也能改，就需要自己去摸索了

/deep/ .el-radio__inner {
    border-radius: 2px !important;
  }

  /deep/ .el-radio__input.is-checked .el-radio__inner::after {
    content: '';
    content: '';
    width: 23px;
    height: 13px;
    border: 2px solid black;
    border-top: transparent;
    border-right: transparent;
    text-align: center;
    display: block;
    position: absolute;
    top: -10px;
    left: -4px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    border-radius: 0px;
    background: none;
  }


  /deep/ .el-radio__label {
    color: black !important;
  }

  /deep/ .el-radio__inner {
    border-color: #000000;
  }

  /deep/ .el-radio__input.is-disabled .el-radio__inner {
    background-color: #fff;
    border-color: #000;
  }

  /deep/ .el-radio__label {
    font-size: 14px;
  }

  /deep/ .el-radio__input.is-disabled.is-checked .el-radio__inner {
    background-color: white !important;
  }

  /deep/ .el-radio__inner {
    background-color: white !important;

  }

  /deep/ .el-radio__inner::after {
    width: 10px;
    background-color: transparent !important;
    height: 10px;
  }

  /deep/ .el-radio__input.is-checked .el-radio__inner {
    border-color: #000;
  }