如果你一定要用自己的样式觉得美观，你可以这样做：
自己做一张图片，左半边是单选按钮选中的样子，右半边是没选中的样子，利用js和css，只显示其中一半，当被点击时切换到另一半。
1、可以为<label>元素添加生成性内容（伪元素），用其来设置单选按钮的样式。
2、把真正的单选按钮隐藏起来。
1、给label标签添加伪类
需要注意的是，选中时使用background-clip裁剪内容时，padding会让内容撑大，故width、height要相应缩小。
2、隐藏原始按钮
3、注意让按钮和文字水平居中对齐
因为input嵌套在label标签内，不是并行的关系了，给label添加伪类用不了input标签的checked属性。故考虑直接给input标签添加伪类来实现。
给input标签添加伪类，那就不能用1中的方式隐藏原始的input的按钮，也不能使用display:none 以及opacity:0 等方式隐藏了，因为会直接隐藏到input的伪类的展示，可以通过设置input标签的width:0height:0 来实现。 按钮布局主要通过定位来实现，其他不变。
控制该单选按钮的checked属性就可以了,赋值为true选中,赋值为false为取消选中,或是选中同组的其它按钮则当前按钮自动取消选中.示例代码如下:<input type="radio" name="r" id="r1">1<input type="button" onclick="javascript:document.getElementById('r1').checked=true" value="选中1"><input type="button" onclick="javascript:document.getElementById('r1').checked=false" value="取消1">
