改变单选框radio的样式

改变单选框radio的样式

先附上效果图：

具体实现步骤：

1. 在input标签后面添加一个span标签用来改变样式

                            
                            
                            
                            
创建新房源
                        

2. 将Input的display设置为none,然后写span的样式作为radio的未选中样式

#panel #radio1,#panel #radio2,#panel #radio3{
    display: none;
}
#panel .radioInput {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid #EFEFEF;
    border-radius: 100%;
    margin-right: 10px;
    vertical-align: middle;
}

3. 使用after伪类，写radio选中时的样式

#panel .radio-type:checked + .radioInput:after{
    content:"";
    display: inline-block;
    width:9px;
    height:9px;
    background:#008489;
    border-radius:100%;
    margin-bottom:3px;
    margin-left:2.5px;
}
#panel .radio-type:checked + .radioInput {
    border: 2px solid #008489;
    box-shadow: 0 0 5px #008489;
}

最后附上全部代码：
html部分：

    
        
        
        
        
        
        
    
    
        

            

                

                    
您想先做什么？
                    

                        
                            
                            
                            
                            
创建新房源
                        
                    
                    
完成发布房源
                    

                        
                            
                            
                            
                            

                                
Jungle• 8 靠近太古里的纯日式住宅
                                
整套房子
                            
                        
                    
                    

                        
                            
                            
                            
                            

                                
Jungle• 8 靠近太古里的纯日式住宅
                                
整套房子
                            
                        
                    
                    下一步
                
            
        

        
        
    

css部分：

.panel-title{
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 30px;
    color: #484848;
}
#panel{
    margin-top: 60px;
}

#panel #radio1,#panel #radio2,#panel #radio3{
    display: none;
}
#panel .radioInput {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid #EFEFEF;
    border-radius: 100%;
    margin-right: 10px;
    vertical-align: middle;
}
#panel .radio-type:checked + .radioInput:after{
    content:"";
    display: inline-block;
    width:9px;
    height:9px;
    background:#008489;
    border-radius:100%;
    margin-bottom:3px;
    margin-left:2.5px;
}
#panel .radio-type:checked + .radioInput {
    border: 2px solid #008489;
    box-shadow: 0 0 5px #008489;
}
#panel img{
    width: 96px;
}
#panel .con{
    display: inline-block;
    margin-left: 15px;
    font-size: 16px;
    font-weight: 500;
    vertical-align: middle;
}
#panel .panel-title1{
    font-size: 18px;
    font-weight: 600;
    color: #484848;
    margin-bottom: 20px;
}
#panel .panel-title~div,#panel .panel-title1~div{
    border-bottom: 1px solid #EFEFEF;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
#panel button{
    background-color: #008489;
    color: white;
    font-weight: 600;
    width: 90px;
    height: 40px;
}