css如何自定义radio单选框样式？（代码实现）

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了css如何自定义radio单选框样式？（代码实现），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1435字，纯文字阅读大概需要3分钟。

内容图文

html部分

<div class="radio">
    <label>
        <input name="feel" type="radio" value="love" />
        <span class="pos">
            <span class="radio_bg">
                <span class="radio_on"></span>
            </span>
        </span>
        <span>LOVE</span>
    </label>
    <label>
        <input name="feel" type="radio" value="hate" />
        <span class="pos">
            <span class="radio_bg">
                <span class="radio_on"></span>
            </span>
        </span>
        <span>YOU ARE NICE</span>
    </label>
</div>

css样式部分

            .radio {
                width: 260px;
                height: 26px;
                line-height: 26px;
                margin: 200px auto;
                background-color: #ddeef1;
                font-size: 16px;
                color: #495060;
                text-align: center;
            }        
            label:first-child {
                margin-right: 40px;
            }
            label input, .radio_on {
              display: none;
            }            
            .pos {
                display: inline;
                vertical-align: middle;
            }        
            .radio_bg {
              position: relative;
              display: inline-block;
              height: 14px;
              width: 14px;
              border: 1px solid #B3B4B8;
              border-radius: 50%;
            }        
            label:hover .radio_bg, label input:checked + span.pos span.radio_bg {
              border: 1px solid #27B28B;
            }        
            label input:checked + span.pos span.radio_bg .radio_on {
              display: inline-block;
              position: absolute;
              top: 2px;
              left: 2px;
              width: 10px;
              height: 10px;
              border-radius: 50%;
              background-color: #27B28B;
            }

效果图

相关推荐：

HTML的checkbox和radio怎样美化样式

使用CSS自定义radio、checkbox样式的示例详解

以上就是css如何自定义radio单选框样式 ？（代码实现）的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的css如何自定义radio单选框样式？（代码实现）全部内容，希望文章能够帮你解决css如何自定义radio单选框样式？（代码实现）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端