关于input type radio的自定义样式问题的解决办法

<style>
		input[type=radio] {
			/*去除浏览器默认样式*/
		    -webkit-appearance:none;
			-moz-appearance:none;
			appearance:none;
			/*自定义样式*/
		    position:relative;
			display:inline-block;
			width:20px;
			height:20px;
			border:1px solid red;
			outline:none;
			cursor:pointer;
			/*设置为圆形，看起来是个单选框*/
		    -webkit-border-radius:20px;
			-moz-border-radius:20px;
			border-radius:20px;
			vertical-align:middle;
		}
		input[type=radio]:after {
			content:'';
			position:absolute;
			width:12px;
			height:12px;
			display:block;
			left:0;
			top:0;
			right:0;
			bottom:0;
			margin:auto;
			background:#17533b;
			-webkit-border-radius:12px;
			-moz-border-radius:12px;
			border-radius:12px;
			-webkit-transform:scale(0);
			-moz-transform:scale(0);
			transform:scale(0);
			/*增加一些动画*/
		    -webkit-transition:all ease-in-out 300ms;
			-moz-transition:all ease-in-out 300ms;
			transition:all ease-in-out 300ms;
		}
		input[type=radio]:checked:after {
			-webkit-transform:scale(1);
			-moz-transform:scale(1);
			transform:scale(1);
		}
		</style>