css设置radio不显示小圈

<input type="radio" name="n"  checked="checked"><span>选中变红</span>

默认情况下，input的type为radio时会显示小圆圈，去除的方法很简单，只需要设置 input{-webkit-appearance:none;} 即可。

设置了input{-webkit-appearance:none;} 后，input就会消失不可见，input也就失效了，我们可以设置它的width和height属性让它显示出来，同时设置它的background和border来进行美化。

（相关课程推荐：css视频教程）

<label for="r1">
	<input type="radio" id="r1" name="n" checked="checked">radio1
</label>
<label for="r2">
	<input type="radio" id="r2" name="n" checked="checked">radio2
</label>

<style>
	input[type="radio"]{
		-webkit-appearance:none;
		width: 16px;
		height: 16px;
		background: pink;
		border-radius: 10%;
		border: 4px solid skyblue;
	}
	input[type="radio"]:checked{
		background: #000;
	}
	input[type="radio"]:checked + span{
		color: red;
	}
</style>

效果：