input[type="radio"]自定义样式

在使用表单的时候，input[type="radio"]样式总是不那么好看，并且，不同浏览器的的显示还不一样，很是头疼。

对单选按钮自定义样式，我们以前一直用的脚本来实现，不过现在可以使用新的伪类 :checkbox 来实现。
如果直接对单选按钮设置样式，那么这个伪类并不实用，因为没有多少样式能够对单选按钮起作用。不过，倒是可以基于单选按钮的勾选状态借助组合选择符来给其他元素设置样式。

很多时候，无论是为了表单元素统一，还是为了用户体验良好，我们都会选择 label 元素和input[type="radio"] 一起使用。当<label>元素与单选按钮关联之后，也可以起到触发开关的作用。

思路：

1. 可以为<label>元素添加生成性内容(伪元素)，并基于单选按钮的状态来为其设置样式；

2. 然后把真正的单选按钮隐藏起来；

3. 最后把生成内容美化一下。

解决办法：

1、html结构代码

<div class="ul-con">
	<ul style="overflow: hidden;">
		<li><label><input type="radio" name="radio" /><span>一层</span></label></li>
		<li><label><input type="radio" name="radio" /><span>二层</span></label></li>
		<li><label><input type="radio" name="radio" /><span>三层</span></label></li>
		<li><label><input type="radio" name="radio" /><span>四层</span></label></li>
	</ul>
</div>

2、生成一个伪元素，作为美化版的单选按钮，先给伪元素添加一些样式：

input[type="radio"] + span::before {
	content: "\a0";		/*不换行空格*/
	display: inline-block;
	vertical-align: middle;
	font-size: 16px;
	width: 16px;
	height: 16px;
	margin-right: 10px;
	border: 1px solid #01cd78;
	border-radius: 50%;
	text-indent: 5px;
	line-height: 1;
}
input[type="radio"]:checked + span::before {
	width: 12px;
	height: 12px;
	background-color: #01cd78;
	background-clip: content-box;
	padding: 2px;
}

现在的样子：

现在把input原生的单选按钮隐藏：

input[type="radio"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

就是现在的样子了

隐藏原来的单选按钮时，如果使用 display: none; 的话，那样会把它从键盘 tab 键切换焦点的队列中完全删除。

于是可采用剪切的方式，让剪切后的尺寸为零，这样就隐藏了原来的单选按钮。