Html单选按钮自定义样式

　　前言：

　　某天，写了一个带有单选按钮的界面，突然想起网上其他网站各种各样的单选按钮，
遂想"改下这个圆圈圈怎么样？"，于是在找了一遍单选按钮的样式，
没一个说是修改圆圈圈，于是又去网上找了一遍，各种各样，自己选了其中一种并稍加修改，感觉简单通俗易懂，
而且最重要的是效果好，故在此和大家分享一下。
  

原理：
    之前已经提及，html的单选按钮没有提供一个样式能修改其圆圈，
所以仅靠一句类似"color:#fff"的语句是不可能的，不过考虑：
    （A）html每个input都可以加一个label，点击label，也会出发input的点击：

是 否
    （B）label标签可以加背景，并通过其他样式，让背景显示在文字的左边：　　　　　　　　　　　

是 否
    （C）input标签可以隐藏：　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

是 否
    （D）点击label后，可以通过JS，修改其背景图片:

（此处为图片）

看到这里有没有恍然大悟，什么自定义单选按钮的图标，
不过是把单选按钮隐藏了，然后通过每次点击修改label的背景图片，
达到自定义的效果，而且后期需要把单选按钮的图标换成花花草草猫猫狗狗，
也不过是换下图片而已。如果还不能实现，我们接着往下细谈：

实现：

原理中说的四点，也可以看作实现的自定义单选按钮的四部曲：

A：没啥好说的，就是标签使用。

<label for="sex-man" class="radio_label checked"> 
    <input type="radio" value="1" checked="checked" id="sex-man" name="sex" /> 
    男 
</label>
            

                当前名称：Html单选按钮自定义样式
                

                网站链接：/news8/159358.html
            
            

                                    成都网站建设公司_创新互联，为您提供网站设计、小程序开发、网站设计公司、ChatGPT、动态网站、网站维护            
            

                广告
                
            
            

                声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：
                创新互联