如何自定义radio的样式,更改选中的颜色?


1.html代码
<div class="rdo">
        <input name="sex" id="male" type="radio">
        <label for="male">男</label>
</div> 
<div class="rdo">
        <input name="sex" id="female" type="radio">
        <label for="female">女</label>
</div> 
 
2.样式
input[type="radio"] + label::before {
    content: " ";
    display: inline-block;
    vertical-align: middle;
    width: .853333rem;
    height: .853333rem;
    border-radius: 50%;
    border: .064rem solid #fd8869;
    margin-right: .213333rem;
    box-sizing: border-box;
}
input[type="radio"]:checked + label::before {
    background-color: #fd8869;
    background-clip: content-box;
    padding: .149333rem;
    box-sizing: border-box;
}
input[type="radio"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}
 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM