一样是一个 radio 元素加一个专属的 label 元素：
XML/HTML Code复制内容到剪贴板
<body>
<h3>性别(单选)</h3>
<ul class="abgne-menu-20140109-1">
<li>
<input type="radio" id="male" name="sex">
<label for="male">我是男生</label>
</li>
<li>
<input type="radio" id="female" name="sex">
<label for="female">我是女生</label>
</li>
<li>
<input type="radio" id="other" name="sex">
<label for="other">我不想说</label>
</li>
</ul>
</body>
先进行基本的样式设计：
CSS Code复制内容到剪贴板
.abgne-menu-20140109-1, .abgne-menu-20140109-1 li {
list-style: none;
margin: 5px 0;
padding: 0;
}
.abgne-menu-20140109-1 label {
cursor: pointer;
display: block;
width: 120px;
position: relative;
line-height: 31px;
}
.abgne-menu-20140109-1 input[type="radio"] {
display: none;
}
这些部份在用 CSS3 做表单 – 自订单/多选框样式(一)中应该都有学过吧，就只是先把 radio 元素隐藏起来。
接着，笔者要使用 ::after 拟元素(Pseudo-elements)在 lable 元素中产生用来代替单选框样式的元素：
CSS Code复制内容到剪贴板
.abgne-menu-20140109-1 label::after {
content: "No";
display: inline-block;
width: 25px;
height: 25px;
line-height: 25px;
border-radius: 50%;
padding: 3px;
color: #FFF;
background: #f00;
text-align: center;
margin-left: 10px; /* 跟文字产生距离 */
}
