修改Element-UI中el-radio或者el-checkbox的样式

::v-deep {
    .el-radio {
      //添加边框
      /* border: 1px solid rgb(207, 204, 204); */
      //选中时边框的颜色
      /* &.is-checked {
        border: 1px solid #28d4c1 !important;
      } */
      //鼠标滑过改变字体和小圆圈边框的样式
      &:hover {
        border-color: #25a785 !important;
        color: #25a785 !important;
        //鼠标滑过时小圆点边框显示
        .el-radio__inner {
          border-color: #25a785;
        }
      }
      .el-radio__input {
        margin-bottom: px(5);
        //选中时的样式
        &.is-checked {
          .el-radio__inner {
            //选中时小圆圈的的颜色
            background-color: #25a785;
            border-color: #25a785;
          }
          + .el-radio__label {
            //选中时字体的颜色
            color: #25a785 !important;
          }
        }
        .el-radio__inner {
          // 鼠标滑过小圆点时的样式
          &:hover {
            border-color: #25a785;
          }
        }
      }
    }
}

亲测,好使
上述摘自https://blog.csdn.net/weixin_45486264/article/details/107384340

  • 核武器登场
    你仅仅修改单个样式的话用上述的方法完全可以,如果项目都是同一种风格,上面那种方法就太笨了,Element给我们提供了修改主题色和各个组件样式的的方案(如下图)


    修改样式.png

    右边的各种颜色和组件样式你自己编辑就好了,编程之后把文件下载了,然后按照官方提示的修改一下就行了,把之前的全局样式注释了,引用最新编辑的主题,这样就ok了


    自定义主题引入.png

你可能感兴趣的:(修改Element-UI中el-radio或者el-checkbox的样式)