radio 变成多选框的样式

126 阅读1分钟

原本的效果:

image.png

希望的效果:

image.png

            <el-radio-group v-model="addressRuleForm.phoneType" @change="contactWay">
                <el-radio :label="0">座机号</el-radio>
                <el-radio :label="1">手机号</el-radio>
              </el-radio-group>
::v-deep {
  .el-radio__inner {
    display: inline-block;
    position: relative;
    border: 1px solid #dcdfe6;
    border-radius: 2px;
    box-sizing: border-box;
    width: 14px;
    height: 14px;

    background-color: #fff;

    z-index: 1;

    //小圆点消失
    // transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
    //   background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
  }
  .el-radio__input.is-checked + .el-radio__label {
    color: #0090ff !important;
  }
  .el-radio__input.is-checked .el-radio__inner::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 4px;
    border: 1px solid white;
    border-top: transparent;
    border-right: transparent;
    text-align: center;
    display: block;
    top: 2px;
    left: 1.5px;
    vertical-align: middle;
    transform: rotate(-45deg);
    border-radius: 0px;
    background: none;
  }
}