美化单选按钮

在做项目中，经常会遇到提交，单选，复选。

但是直接拿来用这些标签和样式，丑，太丑。那么有没有好的方法来处理这些表单元素呢？

下面我举个例子，来处理单选按钮。

中心思想：利用定位 把input按钮隐藏，然后给label加图片再用js控制（对于另类的效果需要用js控制，比如取消单选）

html:

<div id="box">
　　<label for="radio-00" class="label_radio r_off">                     
　　　　<input type="radio" name="communication"><span>12345</span>                 
　  </label>
</div>

css:

label {
    display: block;
    cursor: pointer;
    line-height: 16px;
    float: left;
}
.label_radio input {
    margin-right: 5px;
}

.label_radio {
    margin-right: 35px;
}

.label_radio {
    background: url(/img/radioBtn.png) no-repeat;
}
.label_radio {
    background-position: 0 -16px;
}

.label.r_on {
    background-position: 0 0;
}
.label_radio input {
    position: absolute;
    left: -9999px;
}
span{
    margin-left: 25px;
}

JavaScript：

$("#box").on("click","input[type='radio']", function () {
    if($(this).parent().hasClass("r_on")){
    　　$(this).removeAttr("checked");
    　　$(this).parent().removeClass("r_on").addClass("r_off");
    　　return;
    }
    $("#box input[type='radio']").removeAttr("checked");
    　　$(this).attr("checked", "checked");
    　　$(this).parent().removeClass("r_off").addClass("r_on").siblings().removeClass("r_on").addClass("r_off");
});