思路:
1. 可以为<label>元素添加生成性内容(伪元素),并基于单选按钮的状态来为其设置样式;
2. 然后把真正的单选按钮隐藏起来;
3. 最后把生成内容美化一下。
解决方法:
1. 一段简单的结构代码:
<div class="female"> <input type="radio" id="female" name="sex" /> <label for="female">女</label> </div> <div class="male"> <input type="radio" id="male" name="sex" /> <label for="male">男</label> </div>
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