關於jsp頁面checkbox複選框的默認樣式的修改(自定義複選框樣式)

原創

lpch0825

2020-02-20 19:00

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）單選的效果：