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

这是这篇博客的连接

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

主要的解决思路

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

element ui的单选框更改点击后的颜色(单选框的fill属性失效)_第1张图片

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

element ui的单选框更改点击后的颜色(单选框的fill属性失效)_第2张图片

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

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

你可能感兴趣的:(前端,#,element,UI)