HTML表单美化

由于一些系统原生的表单控件在各个浏览器中显示效果不一致，且无法设置某些关键CSS样式，为了保证表单在各浏览器中的兼容性，表单美化就是不得不做的一件事了

单选按钮
【实现效果】

【实现过程】

body{
    margin: 0;
    font: 16px/20px "宋体";
}
.box{
    width: 500px;
    height: 100px;
    line-height: 100px;
    margin: 0 auto;
    border: 1px solid black;
    text-align: center;
}
.box label{
    position:relative;
    padding-left: 20px;
}
.box input{
    visibility: hidden;
}    
.box i{
    position: absolute;
    top: -2px;
    left: -2px;
    height: 19px;
    width: 19px;
    background: url('https://demo.xiaohuochai.site/radiobutton.gif') no-repeat -14px -18px;
}
.box label:hover{
    color: red;
}
.box label:hover i{
    background-position: -14px -118px;
}
.box label.selected i{
    background-position: -14px -218px;
}
<div class="box" id="box">https://demo.xiaohuochai.site
    选择一项游戏方式：
    <label for="xiu"><i></i>咻一咻</label>
    <input id="xiu" type="radio" value="咻一咻">
    <label for="yao"><i></i>摇一摇</label>
    <input id="yao" type="radio" value="摇一摇">
    <label for="niu"><i></i>扭一扭</label>
    <input id="niu&