HTML radio自定义美化样式。

最新推荐文章于 2025-06-07 22:15:50 发布

原创最新推荐文章于 2025-06-07 22:15:50 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #需求

css 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种自定义的Radio按钮样式实现方法，通过CSS样式和图片背景实现了独特的视觉效果。文章提供了完整的CSS代码和HTML结构，便于读者理解和应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自己写了个radio样式，根据项目需求写的。上传到博客，方便以后使用。
先贴css样式，样式不多，比较简单，易懂。

.radio_btn{
            width: 30px;
            height: 30px;
            background: url(../images/dx.png) no-repeat;
            background-size: cover;
            display: inline-block;
            /*background: orange;*/
            border-radius:50%;
            position: relative;
            vertical-align: middle;
        }

        .radio_btn input{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            z-index: 100;
        }

        .radio_btn span{
            background: url(../images/dx-.png) no-repeat;
            background-size: cover;
            width: 100%;
            height: 100%;
            display: inline-block;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            border-radius: 50%;
        }

        .radio_btn input[type=radio]+span{
            opacity: 0;
        }
        .radio_btn input[type=radio]:checked+span{
            opacity: 1;
        }

HTML部分：

<div  class="radio_btn">
            <input type="radio" name="sex" id="man" value="" checked="checked" />
            <span></span>
        </div>
        <div  class="radio_btn">
            <input type="radio" name="sex" id="male" value="" />
            <span></span>
        </div>