思路:
1. 可以为元素添加生成性内容(伪元素),并基于单选按钮的状态来为其设置样式;
2. 然后把真正的单选按钮隐藏起来;
3. 最后把生成内容美化一下。
解决方法:
1. 一段简单的结构代码:
女
男
2. 生成一个伪元素,作为美化版的单选按钮,先给伪元素添加一些样式:
input[type="radio"] + label::before {
content: "\a0"; /*不换行空格*/
display: inline-block;
vertical-align: middle;
font-size: 18px;
width: 1em;
height: 1em;
margin-right: .4em;
border-radius: 50%;
border: 1px solid #01cd78;
text-indent: .15em;
line-height: 1;
}
注:可以通过margin-top来调节位置
现在的样子:
原来的单选按钮仍然可见,但是我们先给单选按钮的勾选状态添加样式:
3. 给单选按钮的勾选状态添加不同的样式:
input[type="radio"]:checked + label::before {
background-color: #01cd78;
background-clip: content-box;
padding: .2em;
}
现在的样子:
4. 现在把原来的单选按钮隐藏:
input[type="radio"] {
position: absolute;
clip: rect(0, 0, 0, 0);
}
现在的样子:
隐藏原来的单选按钮时,如果使用 display: none; 的话,那样会把它从键盘 tab 键切换焦点的队列中完全删除。
于是可采用剪切的方式,让剪切后的尺寸为零,这样就隐藏了原来的单选按钮。
参考链接:http://www.cnblogs.com/xinjie-just/p/5911086.html