CSS+checkbox 實現多選按鈕 多選標籤
阿新 • • 發佈:2018-12-11
效果圖:
CSS:
input[type="checkbox"] { position: absolute; clip: rect(0, 0, 0, 0); } input[type='checkbox'] + label { display: block; height: 30px; padding: 6px 12px; font-size: 13px; font-weight: 500; line-height: 1.428571429; /*color: #009aff;*/ border: 1px solid #ccc; text-align: center; float: left; margin-right: 10px; cursor: pointer; border-radius: 2px; } input[type='checkbox']:checked + label { /*border: 1px solid #009aff;*/ background-color: #4dc63c; color: #fff; border-radius: 2px; font-weight: 500; }
jsp:
<c:forEach items="${serve}" var="s">
<input id="d${s.id}" type="checkbox" data-type="welfare" name="reason">
<label for="d${s.id}">${s.name}</label>
</c:forEach>
說明:
${serve}是後臺返回的物件集合