美化單選按鈕

在作項目中，常常會遇到提交，單選，複選。

可是直接拿來用這些標籤和樣式，醜，太醜。那麼有沒有好的方法來處理這些表單元素呢？

下面我舉個例子，來處理單選按鈕。

中心思想：利用定位 把input按鈕隱藏，而後給label加圖片再用js控制（對於另類的效果須要用js控制，好比取消單選）

html:

1 <div id="box">
2 　　<label for="radio-00" class="label_radio r_off">                     
3 　　　　<input type="radio" name="communication"><span>12345</span>                 
4 　  </label>
5 </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：

 

 1 $("#box").on("click","input[type='radio']", function () {
 2     if($(this).parent().hasClass("r_on")){
 3     　　$(this).removeAttr("checked");
 4     　　$(this).parent().removeClass("r_on").addClass("r_off");
 5     　　return;
 6     }
 7     $("#box input[type='radio']").removeAttr("checked");
 8     　　$(this).attr("checked", "checked");
 9     　　$(this).parent().removeClass("r_off").addClass("r_on").siblings().removeClass("r_on").addClass("r_off");
10 });