如何自定义INPUT RADIO样式

做一个小项目，不想用第三方插件。自己手写美化一个单选框，下面说下思路。

1.把默认显示的设置为隐藏

2.利用CSS：after属性自定义想显示成的样子

下面把代码发出来

input[type=radio]{
    visibility: hidden;display: inline-block; margin-right: .2rem;
}
input[type=radio]:checked::after{
	background-image: url('../img/choujiang/rputon.png');
	background-repeat: no-repeat;
	background-size: contain;
	visibility: visible;
}
input[type=radio]::after{
	content: ' ';
	display: block;
	height: .32rem;
	width: .32rem;
	background-image: url('../img/choujiang/rput.png');
	background-repeat: no-repeat;
	background-size: cover;
	visibility: visible;
}

最终的显示效果就是这个样子，SOEASY!