element ui的单选框更改点击后的颜色(单选框的fill属性失效)

这是这篇博客的连接

关于在element ui的单选框更改点击后的颜色的css 或者scss实现,主要的原因是小哥我今天在使用element UI的时候,发现单选框的那个fill属性没有效果,这让我很郁闷,由于之前的全局样式是定义了紫色,但是UI设计的网页在点击后是绿色,这就需要自己抛开fill属性,自己原生css写样式。

主要的解决思路

1.在element UI中所使用的的组件最后在生成网页的时候是会自动生成很多类,他们是最基础的类,就是他们实现了element UI的控件样式,也是我们代码中看不见的类,虽然看不见,但是类名在浏览器生成页面的时候是固定的,我们就是通过更过这些固定的类名来自定义组件的样式
2.首先就是找到这些类,你生成组件后,打开调试窗口,用小箭头去点你想更改样式的的地方,在右边就有类名出现。
你看!!!!!(默认你会用!不至于太小白!)

就是这些箭头所指向的类,找到他们的名字

3.在自己的css中根据这些类的名字,然后使用选择器就可以找到他们,上代码(我这里用的是scss,如果不了解可以先去看看scss)

这段代码很重要,后面没有代码了 就是括号了,截屏不够大了而已

4.前面说的就可以改很多样式,但是以下的代码才是更新单击后颜色的代码
.radio{
                width: 100%;
                height: px(40);               
                /deep/{
                    .el-form-item__label{
                        @include labal_font();
                    }             
                    .el-form-item__content{
                        .el-radio{
                            margin-bottom: px(20);   
                             //从这里开始 就是更改颜色的代码,将你的颜色           改掉我的颜色就可以了
                            .el-radio__input{                               
                                margin-bottom: px(5);
                                &.is-checked {
                                .el-radio__inner{
                                    background-color: #2CCF2A;
                                    border-color: #2CCF2A; 
                                 }
                                }
                                .el-radio__inner{
                                    &:hover{
                                        border-color:#2CCF2A;
                                    }
                                }
                            }
                            //到这里结束
                            .el-radio__label{                     
                                font-size: 16px;
                                font-family:SourceHanSansCN-Normal,SourceHanSansCN;
                                font-weight:400;
                                color:rgba(51,51,51,1);
                                line-height:px(40);
                                padding: 0 0 0 px(10);
                                
                            }
                        }
                    }
                }
            }

都看到这里了,这是我第一次写博客,如果有赐教或者这篇博客对你有用的话,请点击关注加收藏,不要白嫖哦!!!!

  • 9
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值