预览一下效果：http://39.105.101.122/myhtml/CSS/singlebox2/singleRadio.html

布局结构为：

1

type=“radio”定义单选按钮，label标签为 input 元素定义标注，把label标签的for属性设置为何input标签的id相同即可关联，当鼠标点击label的时候也会触发input。可以设置label的样式，隐藏input，当radio选中的时候，对应的label标签发生样式改变就可以。

label标签默认是不显示的，所以需要设置display属性为inline-block(行内块级元素，没有换行符)。

添加label的after，设置position为absolute，label的position为relative，after的大小位置设置好，添加transform: scale(0)缩小到看不到，然后当关联input选中（checked值是checked）的时候，再设置scale(1)，然后添加transition过渡属性。

在这里不需要用到js，当input选中的时候设置label属性可以这样写：

input:checked+label:after{
…
}

加号是相邻兄弟选择器（如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器）。这样当radio选中的时候，相对应的label标签的样式也会改变。

以上是一些需要注意的地方，其他的就是一些定位，颜色，宽度高度，边框属性了，这个可以自定义。

附上代码：

html:

1
2 3 4 5 6 7 8 9

CSS:

1 /**{*/
2 /*margin: 0;*/
3 /*padding: 0;*/
4 /*}*/
5 .radio-1{
6 width: 980px;
7 margin: 0 auto;
8 padding: 3% 0;
9 background-color: #3cc;
10 text-align: center;
11 }
12 .radio-1 input{
13 display: none;
14 }
15 .radio-1 label{
16 display: inline-block;
17 width: 28px;
18 height: 28px;
19 position: relative;
20 background-color: #ffffff;
21 border: 1px solid #cccccc;
22 margin-left: 10px;
23 border-radius: 100%;
24 cursor: pointer;
25 }
26 .radio-1 label:after{
27 width: 20px;
28 height: 20px;
29 top: 4px;
30 left: 4px;
31 position: absolute;
32 background-color: #666666;
33 border-radius: 100%;
34 content: "";
35 transform: scale(0);
36 transition: all .2s ease-in;
37 }
38 .radio-1 input:checked+label:after{
39 transform: scale(1);
40 transition: all .2s ease-in;
41 }
42 .radio-1 input:checked+label{
43 background-color: #eee;
44 transition: all .2s ease-out;
45 }
46 .radio-2{
47 width: 980px;
48 margin: 0 auto;
49 padding: 3% 0;
50 text-align: center;
51 background-color: #fc9;
52 }
53 .radio-2 input{
54 display: none;
55 }
56 .radio-2 label{
57 width: 28px;
58 height: 28px;
59 border: 1px solid #ccc;
60 border-radius: 50%;
61 overflow: hidden;
62 margin-left: 10px;
63 background-color: #fff;
64 display: inline-block;
65 position: relative;
66 cursor: pointer;
67 }
68 .radio-2 label:after{
69 content: "";
70 width: 20px;
71 height: 20px;
72 position: absolute;
73 top: 4px;
74 left: 4px;
75 border-radius: 40%;
76 background-color: #666666;
77 transform-origin: -2px 50%;
78 transform: rotate(-180deg);
79 transition: all .2s ease-out;
80 }
81 .radio-2 input:checked+label:after{
82 transform: rotate(0deg);
83 transition: all .2s ease-out;
84 }
85 .radio-2 input:checked+label{
86 background-color: #eee;
87 transition: all .2s ease-out;
88 }