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

小小前端.

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

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript css css3

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

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

文章详细介绍了如何在ElementUI的radio组件中，通过CSS深入定制样式，包括边框、内边距、颜色和旋转效果。作者提到了几个关键的样式代码段，并提示读者可能需要自行探索其他可能的修改点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/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;
  }