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>

网站建设，SEO内部链接构建的四种途径
网站建设基本的十个技巧-大连网站制作
网站有没有必要做成htm静态页面
建站利器织梦dedecms程序安全设置
香港-澳门-台湾服务器需要网站ICP备案以及公安备案吗
企业网站页面推广优化
网站架构、代码、布局和色彩选择
新网站怎么做网站优化?seo网站优化专家告诉你