<label for="man" class="radio">
<span class="radio-bg"></span>
<input type="radio" name="sex" id="man" value="男" checked="checked" />男
<span class="radio-on"></span>
</label>
这个方法中最重要的是选中效果的类名：.radio input:checked + span.radio-on
+是CSS2的伪类，其意义为：p+p 选择紧接在 <p>元素之后的所有 <p>元素。
也就是找到选中的（:checked）的input，其之后的类名为radio-on的span元素做选中圆圈效果。
网上有很多美化方法是把label做成了圆圈，但是这样的话，单选的文字就必须要要放到label的外面，这导致了点击文字的时候，不能切换单选效果。
所以我在label里加了一个类名为radio-bg的span来专门做后面大的圆圈，再用一个类名为radio-on的span来做选中的前面小的圆圈。
这样就保留了点击label里的文字，也可以切换单选的效果。
以上就是如何使用纯CSS3美化单选按钮radio的示例代码分享的方法
1、新建一个html文件，命名为test.html，用于讲解。2、在test.html文件中，使用button标签创建一个按钮。
3、在test.html文件中，设置button标签的class属性为mybtn。
4、在css标签内，通过class定义button的样式，设置它的宽度为50px，高度为50px，实现正方形。
5、在css标签内，再设置在设置忽略按钮的背景颜色为红色，文字颜色为白色，按钮无边框。
6、在浏览器打开test.html文件，查看实现的效果。css是一种用来表现HTML或XML等文件样式的计算机语言，是描述标记语言页面格式的标准。
简单的代码实现，仅供参考：
单选框：
<body> <input type="radio" name="sex" value="n" /> <input type="radio" name="sex" value="v" /></body>
复选框：
<body> <input type="checkbox" value="n" /> <input type="checkbox" value="v" /></body>
下拉框：
<body> <select> <option>n</option> <option>n</option> <option>n</option> </select></body>
扩展资料：
css注意事项
1、每个标签的属性设置必须是被一对花括号包含。像下面的样子：
标签
{
属性名称：属性值
}
2、花括号中每个属性值赋值后必须用分号隔开。分号就相当于C#和C中的分号，指示一行语句的结束，加上分号就是和网页的解释器说明这个属性的赋值已经结束了，下面开始一个新的属性的赋值。正确的格式是下面的样子：
标签
{
属性名称1：属性值
属性名称2：属性值
属性名称3：属性值
}
3、关于颜色值。我们在前面的文章中，在设置style时，不论是color属性还是background-color属性，赋值时都是指定的颜色名称。这种方式在网页编程中比较不通用。比较常用的做法是赋16进制值，类似于#RRGGBB这种样式，每一位的取值都是从1到F，每两位对应一类颜色值。具体的颜色值可以在网上搜到。
4、关于字体。我们在style中的font-family中设置字体。有时候我们设置的字体可能用户电脑中没有，这时候我们可以在font-family中设置多个可选字体，用逗号分隔，这样如果前面的字体用户电脑中没有，则可以使用后面的字体进行替换。下面是个例子：
<p sytle="font-family:serif,Cursive,Fantasy">
参考资料来源：百度百科：CSS
