美文网首页
修改Element-UI中el-radio或者el-checkb

修改Element-UI中el-radio或者el-checkb

作者: 男人宫 | 来源:发表于2021-09-28 15:39 被阅读0次
    ::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-checkb

          本文链接:https://www.haomeiwen.com/subject/amhrnltx.html