复选框美化（去√，复选按钮，图片单选框）

效果图：

css：

<style type="text/css">
.RadioStyle input{
       display: none;
}
.RadioStyle label{
    border: 1px solid #adadad;
    padding: 2px 10px 2px 5px;
    line-height: 28px;
    min-width: 80px;
    text-align: center;
    float: left;
    margin: 5px;
    border-radius: 5px;
}
.RadioStyle input:checked+label{
    color: white;
    background: #3F949F;
}
.clear{
    clear: both;
}

</style>

HTML代码：

<div class="row cl" >
	<label class="form-label col-xs-4 col-sm-2">可选标签：</label>
	<div class="formControls col-xs-8 col-sm-9 RadioStyle">
		<!-- <c:forEach items="${labels}" var="label" varStatus="stat">
			<input type="checkbox" name="label" value="${label.id }" id="${label.id }" /><label for="${label.id }">${label.name }</label>
		</c:forEach> -->
		<input type="checkbox" name="label" value="" id="bq1" /><label for="bq1">标签6</label>
		<input type="checkbox" name="label" value="" id="bq2" /><label for="bq2">科学大道</label>
		<input type="checkbox" name="label" value="" id="bq3" /><label for="bq3">莲花街</label>
		<input type="checkbox" name="label" value="" id="bq4" /><label for="bq4">公交站附近</label>
		<input type="checkbox" name="label" value="" id="bq5" /><label for="bq5">医院附近</label>
		<input type="checkbox" name="label" value="" id="bq6" /><label for="bq6">学校附近</label>
	</div>
</div>

-------------------------------------------------------更新-----------------------------------------------------------

又做了一个单选框的图片
代码跟上面的差不多，就是改了一下input标签的type为radio
然后修改了一下选中样式

CSS

<style type="text/css">
.col-xs-4 {
    width: 17.7777%;
}

.RadioStyle input{
       display: none;
}
.RadioStyle label{
    border: 1px solid #adadad;
    padding: 2px 10px 2px 5px;
    line-height: 28px;
    min-width: 80px;
    text-align: center;
    float: left;
    margin: 5px;
    border-radius: 5px;
}
/* 就改了这里，改成选中之后添加一个红色的边框 */
.RadioStyle input:checked+label{
    color: white;
    border:2px solid red;
}
.clear{
    clear: both;
}

</style>

HTML:

**<div class="row cl" >
	<label class="form-label col-xs-4 col-sm-2">路口模型：</label>
	<div class="formControls col-xs-8 col-sm-9 RadioStyle">
			<input type="radio" name="model" value="" id="lx1" /><label for="lx1"><img id="" src="${rootPath}/common/resource/images/lx1.png" height="100" width="100"></label>
			<input type="radio" name="model" value="" id="lx2" /><label for="lx2"><img id="" src="${rootPath}/common/resource/images/lx2.png" height="100" width="100"></label>
			<input type="radio" name="model" value="" id="lx3" /><label for="lx3"><img id="" src="${rootPath}/common/resource/images/lx3.png" height="100" width="100"></label>
			<input type="radio" name="model" value="" id="lx4" /><label for="lx4"><img id="" src="${rootPath}/common/resource/images/lx4.png" height="100" width="100"></label>
			<input type="radio" name="model" value="" id="lx5" /><label for="lx5"><img id="" src="${rootPath}/common/resource/images/lx5.png" height="100" width="100"></label>
	</div>
</div>

效果展示：