checkbox複選框的預設樣式太low，最近做的專案我選擇了自定義樣式，網上找了不少文章內容冗餘，並且並不是都有效果，所以將自己過程整理出來，以備後用。

只要在jsp頁面和css樣式表中新增相應程式碼即可：

一、jsp頁面：

<div class="container">
									<span>
										<input type="checkbox" name="ids" id="ids<s:property value='id' />" class="inputCheck" 
											value="<s:property value='id' />" >
										<label for="ids<s:property value='id' />"></label>
									</span>
								</div>
 

注意：我做的是批量刪除的checkbox，由於是迭代生成每行資料，所以生成動態的id，即其中id="ids<s:property value='id' />"，如：某行的資料主鍵id為5，則迭代生成的checkbox的id=“ids5”，相應的lable標籤迭代生成for="ids5",達到了每個checkbox與其lable相互對應。

二、css樣式表：

.container {height:24px;font:600 13px 宋體;}  
.container span {    
	height: 14px;
    padding-left: 3px;
    padding-top: 5px;
    display: inline-block;}
.container .inputCheck {position: absolute;width: 14px;height: 14px;visibility: hidden;}
.container .inputCheck+label {display: inline-block;width: 14px;height: 14px;
                            background: url(../Images/checkbox_01.jpg) no-repeat center center;}  
.container .inputCheck:checked+label {width: 14px;height: 14px;background: url(../Images/checkbox_02.jpg) no-repeat center center; }
 

注意：只要將checkbox_01.jpg改成點選前的複選框圖片，checkbox_02.jpg改成點選後選中的複選框圖片即可。其中visibility:hidden尤為重要，是隱藏預設的checkbox樣式。

三、效果

（1）單選的效果：

（2）全選的效果：