css美化radio选中及禁用的样式

普通的radio禁用状态下，灰色显示看不清哪个项目选中，我们可以利用伪类选择器改变原本的radio默认样式。

input[type=radio]:disabled {
	/*去除浏览器默认样式*/
	appearance: none;
	-webkit-appearance: none;
	/*自定义样式*/
	position: relative;
	width: 14px;
	height: 14px;
	border: 1px solid #333333;
	border-radius: 100%;
	-webkit-border-radius: 100%;
	opacity: 0.8;
	outline: none;

}
input[type=radio]:disabled::after {
	content: '';
	width: 8px;
	height: 8px;
	position: absolute;
	top: 2px;
	left: 2px;
	background: #333333;
	border-radius: 100%;
	-webkit-border-radius: 100%;
	opacity: 0.8;
	transform: scale(0);
	-webkit-transform: scale(0);
}
input[type=radio]:checked:disabled::after {
	transform: scale(1);
	-webkit-transform: scale(1);
}